I have a data, say 200, that should be plotted as yAxis line.
The default min and max value is set to say 300 and 500 respectively.
How can i draw the yAxis plotline dynamically and how to change the scale of yAxis dynamically?
Thanks in advance.
1) To add plotLine use chart.yAxis[0].addPlotLine(object). See docs
2) To change extremes use chart.yAxis[0].setExtremes(min, max). See docs
Related
I have the first chart:
Multiple y-axis with broken y-axis for left-hand-side y-axis only
The left-hand-side y-axis is broken from 1M to 25M, while there is no broken setting for the right-hand-side y-axis. The horizontal lines for the 2 y-axis in the chart area make it a little bit hard to read. It can be improved by setting the broken for the right-hand-side y-axis from 250K to 6.25M like the 2nd chart shows:
Multiple y-axis with broken y-axis for both y-axis
The broken setting is set by user. They cannot preview the result when configuring the settings.
I want to have a chart with the horizontal lines for both hand side overlapped with each other. I can only add the broken setting for right-hand-side y-axis. But I should know the min & max value for all the series used. The min value is default to be 0, but the max value for the series which use left-hand-side y-axis is around 44M, while it is around 13.5M for the right-hand-side y-axis. But the chart shows me 56M for the left-hand-side y-axis, while it is 14M for the right-hand-side y-axis. I cannot predict the max value for the y-axis while generating the chart setting.
Is it possible to add the broken setting for the right-hand-side programmatically? Or is there any other approach?
Is it possible to add the broken setting for the right-hand-side
programmatically? Or is there any other approach?
Yes, adding programmatically calculated breaks seems to be the only way. You can use for example chart's load event where you have access to all the required values.
For example:
chart: {
events: {
load: function() {
const yAxes = this.yAxis;
yAxes[1].update({
breaks: [{
from: 20,
to: 40,
breakSize: 0
}]
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/s01box6p/
API Reference:
https://api.highcharts.com/highcharts/chart.events
https://api.highcharts.com/highcharts/yAxis.breaks
i have a problem with minRange
My chart is "time series, zoomable" type (i enabled also scrollbar for x-axis).
I would like to have minRange weekly when i zoom the chart, but doesn't work...
`http://jsfiddle.net/rax26mvb/`
why ?
thanks!
The minRange define maximum zoom level, when you zoom by selection. In your case you need to also define min/max values on xAxis.
by default without touching the axis, highcharts try to use as much space as possible, what if I want to leave about half an inch on top or bottom because I want to put a logo there. How can I set option so that there is padding on the yaxis basically?
-------------1
-------------2
-------------3
-------------4
ie chart goes from 1 to 4 but series should be plotted within 2 to 3 only.
You can use the minPadding and maxPadding options:
yAxis: {
maxPadding: 0.2,
minPadding:0.2
},
http://api.highcharts.com/highcharts#yAxis.maxPadding
You can also define spacing to add more space above axis.
I am playing with a chart with a one data point.
Here is the jsfiddle demo: http://jsfiddle.net/mddc/mfwyoj7j/7/
I notice that if I add
minRange: 1
-1 or 1 will show up on both sides of the data point on the X axis.
I am new to Highcharts. What does minRange=1 mean here? If it is useless, then it should not create any problems, right?
Is this a bug in Highcharts?
Thanks and regards.
See highcharts API doc here: http://api.highcharts.com/highstock#xAxis.minRange
minRange: the minimum range to display. The entire axis will not be allowed to
span over a smaller interval than this. For example, for a datetime
axis the main unit is milliseconds. If minRange is set to 3600000, you
can't zoom in more than to one hour.
So it is used to limit the zoom-in: you will not be able to zoom if the xAxis display less than 1
Short question : Is there a way to set min/max in Highcharts AFTER the chart has been created. I am aware of intial setup like y: {min: 100,max: 200} at the chart initialization but I want to change max/min later on dynamically.
I guess setExtremes is the best way to go about it.
Syntax should be: chart.yAxis[0].setExtremes(100,300);
If one wants to just set minimum then chart.yAxis[0].setExtremes(100,null); worked for me.
we can also use update method
chart.yAxis[0].update({
max: 100
});
chart.xAxis[0].update({
max: 150
});
Also you can use tickPositioner http://api.highcharts.com/highcharts#yAxis.tickPositioner to define min/max values and ticks between these values.