I am using the HighStock JS lib to produce a chart that uses a linear series (not a time-series) for the xAxis.
I'd still like to use the range-selector in order to zoom to pre-determined ranges within my linear series. Is this possible?
For example; say my xAxis has a series:
[[121,616],[122,600],[123,605],[124,585.5],[125,575.5],[126,580.5],[127,582],[128,582],[129,584],[130,583]]
I'd like to use the range selector to zoom to the last n in the series.
I don't think that is supported out of the box. But what is supported is Axis.setExtremes()
You can dynamically set the zoom of the xAxis using this method, and hence you can create your very own range selector for non timeseries charts
Axis.setExtremes() How to # jsFiddle
My attempt at custom range selectors # jsFiddle
Related
We have a request from customer and we need to trick the highcharts bar view.
The problem is our series contain timestamp vs value but business wise this value is corresponding to previous timestamp to that value's timestamp. So we would like to show the bars in between of these timestamps.
So is there an easy way to do this in highcharts w/o playing with the points in the series.
See images below;
Current Highchart Behaviour
Requested Chart Behaviour
You can use xAxis.tickPositioner in order to move ticks and xAxis.labels.formatter to change labels values.
Live example: https://jsfiddle.net/h9zjmqap/
Output:
I have a chart where two graphs/series have different units. Therefore the y-Axis is different and the extremes are calculated separately from each other.
Is there a way to tell Highcharts to use the same scale, despite the different units, across all graphs/series?
Below is the chart. Relevant y-axis are the ones on the right, as an example. The units are different: "W/m^2" and "kW/kWp", however I want the scale to be the same.
Of course, one way would be a manual approach: in my controller, to go through all the data series and check the overall minimum and maximum value of all data series and then apply the extremes manually via
chart.yAxis[i].setExtremes(min, max)
but I was wondering if Highcharts has any way, like a configuration option, to achieve this.
I didn't find anything in the docs so far.
Thanks.
There is an option to achieve that. You can link one axis to another via linkedTo property.
From API:
linkedTo : Number
Index of another axis that this axis is linked to. When an axis is linked to a master axis, it will take the same extremes as the master, but as assigned by min or max or by setExtremes. It can be used to show additional info, or to ease reading the chart by duplicating the scales.
http://api.highcharts.com/highcharts/yAxis.linkedTo
Example: http://jsfiddle.net/n8tokqru/
yAxis: [{
}, {
linkedTo: 0
}],
I have a Highstock chart with type scatter. When I use the range selector some of the series disappear cause the have no data in the current range. How can I prevent the chart from scaling to only the existing data an keep the yaxis in the initial state?
I can see only two options:
set fixed min and max for yAxis
in afterSetExtremes call yAxis[0].setExtremes(min, max) in setTimeout function, but you need to calculate min and max on your own.
I am using highstock and tried to move the points on a spline serie on the xAxis by setting pointPlacement:0.5. But it seems that it does not work on splines or lines. If I define the series as column it works as expected. With reference to the Highstock Options Reference I think this should work as well for other chart types as this option is also listed under the spline description
Is there any other way to get the points shifted along the xAxis.
I set up a jsfidle to demonstrate the problem. http://jsfiddle.net/pb4Mz/
pointPlacement works only in the column chart.
When using Highcharts, is it possible to change the contents of the legend to display something other than the series?
For example, I have a scatter chart with just one series but with many elements, so that the element labels obstruct one another and are illegible:
Would it be possible to use the legend to display the element names instead of the series? (each member in the series has a different color so that it is possible to use the legend in this case)
EDIT:
It turns out there isn't any good way to do this, so I wrote my own custom legend. You can find the code here: http://pastie.org/5115536
I hope you find it useful
Highcharts allows to show data points instead of series name in the in the legend. But, Unfortunately its only for Pie charts type:pie.
There is a default option available for the Pie Chart though undocumented in the API.
legendType: 'point',
If you try to set it for other type of chart, Legend does not gets rendered.