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).
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'm trying to create the powerpoint chart below in highcharts however as you can see the order of the series do not match. The legend and the categories match but I'm not sure how to make the series order match?
This is what my highcharts replica looks like (link to jsfiddle: (https://jsfiddle.net/6qxukd74/1/)
How can I make the highcharts look exactly like the powerpoint chart?
Add to the yAxis the reversedStacks property
...
yAxis: {
min: 0,
reversedStacks: false
},
...
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.
I'm trying to create a column chart (Highcharts) with a fixed width (range) for all the columns. I have around 300 columns, and I want to draw them actually as lines, and that's why I assign a very small range (0.001) for each of them.
The data format is basically like this: [numberId, min, max].
However, sometimes the height is shown correctly... but some other times it appears with strange height, not even the same for all the columns. I have tried many different things but I didn't manage to find the problem.
This is the jfiddle http://jsfiddle.net/deSSf/3/ (if you resize the area for the chart you will probably see the effect). The fiddle is actually using HighStock, but this chart should be from highcharts lib.
I have screenshos but can't post them.
The code is very simple:
chart: {
renderTo: 'container',
type: 'columnrange',
},
series: [{
data: [[1,0,0.001],......]]
}
There is huge difference between Highcharts and Highstock. In Highstock you have access to dataGrouping which collects data and groups when there is to many points to display on a chart.
Disable it to have working example: http://jsfiddle.net/deSSf/4/
dataGrouping: {
enabled: false
}
I need to output a plot on page, and I'm considering Highstock or Highcharts to implement this. Highstock interface is more preferable due to navigator pane showing the rest of plot after rezooming.
However my plot has numbers in x-asis, but not date/time. Is there any way to use Highstock with numerical x-scale? Or add similar navigator to Highcharts?
Below X Axis formatter can be used with high Stock for displaying numbers in X-Axis:
xAxis: {labels: { formatter: function () {return this.value;}} }
Highstock's only type of xAxis is datetime, so using it with numbers is not an option. (Maybe if you make some tricky formatting actions and define a custom tooltip with the same formatting options it might be possible).
Leaves only Highcharts and there is an example called master-detail chart that could meet your requirements.
Hope that helps.
xAxis: {
type: 'linear' // Other types are "logarithmic", "datetime" and "category"
},