I have created two xAxis one at top and another at bottom (with opposite: true) in my highstock chart. But the problem is that navigator is controlling only the bottom xAxis. Changing the navigator only affects the bottom xAxis not the top one.
Can we control two xAxis with one navigator in highstock?
Here is my sample code:
navigator: {
xAxis: {
type: datetime
}
},
xAxis: [{
type: datetime,
}, {
type: datetime,
opposite: true
}]
You can catch aftersetExtremes() function http://api.highcharts.com/highstock#xAxis.events.afterSetExtremes and call setExtremes on second axis with defined ranges.
http://api.highcharts.com/highstock#xAxis.events.setExtremes
This fairly simple example from the official Highstock demos does it just fine:
http://www.highcharts.com/stock/demo/candlestick-and-volume
If it's not working for you, post a minimal version of your code on jsFiddle.
Related
In Highcharts is possible to drag and drop a series in a line chart, as explained here. But I need to drag the chart itself (i.e. the background) to show past/future data, not the lines. Is this possible with Highcharts? I couldn't find a way in the documentation.
According to the comments - using the panning feature is a looking solution for this case.
Demo: https://jsfiddle.net/BlackLabel/xu36wmj4/
chart: {
panning: {
enabled: true,
type: 'xy'
},
panKey: 'alt',
zoomType: 'xy'
},
API: https://api.highcharts.com/highstock/chart.panning
I have a chart that has been designed that I'm working on and I have a few questions.
First, can I remove the grid lines etc. from the grid and just show a stacked bar graph with no axis/ticks etc.
Here's a link to the designed graph: UI of simple stacked bar chart
Thanks!
You can simply hide both axes to achieve the desired result:
yAxis: {
visible: false
},
xAxis: {
visible: false
},
Live demo: http://jsfiddle.net/BlackLabel/gspgunzj/
API reference: https://api.highcharts.com/highcharts/xAxis.visible
I have a Highstock chart with Navigator which is synced to 4 Highcharts on same page. The Highstock dates don't line up with Highcharts dates plus it's a different format.
Highstock and Highchart:: xaxis:
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
year: '%Y'
},
events: {}
},
Here's the site I'm working on, the file is to large for here. Click on any icon, then pick "Data and Charts". The top chart has a different date format and the bottom charts points don't line up with top chart. I'm sure its default behavior of both Highstock and Highcharts but I can't find a way around problem.
Any help would be greatly appreciated,
Michael
Your first chart, being a Highstock chart, has an ordinal x-axis (API). The other charts do not, as it is not part of Highcharts. You can solve this by setting it to false for the first chart:
$('#container1').highcharts('StockChart', {
xAxis: {
ordinal: false,
// ...
}
// ...
});
This also seems to fix your date formatting problem (I'm not sure why).
when i add multiple series in single chart in highstock area chart,
it'll display only first series in navigator panel.
please refer fiddle
You need to use series oejct in navigator and place all points from first and second series.
http://api.highcharts.com/highstock#navigator.series
Second solution is using a addSeries for navigator like here: http://jsfiddle.net/6fFwM/
window.chart.addSeries({
name : "",
xAxis: 0,
yAxis: 1,
type: "line",
enableMouseTracking: false,
data : new_data,
showInLegend:false
});
Is it possible to align the y axis tick "outside" on a highstock graph, so that it aligns with the gridline, rather than being "inside" and sat on top of the gridline. The documentation for highstock suggests that it should be placed "outside" by default, but looking at every example of a highstock graph, they always appear to be "inside".
tickPosition: String. The position of the major tick marks relative to the axis line. Can be one of inside and outside. Defaults to "outside".
Highchart example (what I want): http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/
Highstock example (what I get): http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/basic-line/
Many thanks in advance.
Update - a solution of sorts
I came to the realisation that a Highcharts.StockChart is just a pre-configured version of Highcharts.Chart in the highstock.js file.
HighCharts.Chart has all the features of a Highcharts.StockChart - not just the features of a Highcharts.Chart in the highcharts.js file.
As a result, I have just used a highstock.js Highcharts.Chart with the configuration I require, and this places the yAxis labels in the correct position.
You can use offset parameter for yAxis.
http://api.highcharts.com/highstock#yAxis.offset
EDIT:
http://jsfiddle.net/Z4zwr/1/
yAxis : {
labels:{
align:'right',
x:-10
},
lineWidth : 1,
offset : 30
},
I've found a solution (jsfiddle): Add labels: { align: 'left' } to your yAxis options, like so:
yAxis: [{
labels: {
align: 'left'
}
}]
This tells Highcharts to align the left end of the labels with the y-axis.
Updated jsfiddle: http://jsfiddle.net/r4wrf63u/