I am using Highcharts Stock with an additional xrange series added ad-hoc. The purpose of the xrange is to mark out a particular price in the candlestick chart. The reason for using xrange instead of plotLines, etc is so that I can allow the user to drag/drop the price line, and my understanding is that can only be done using series.
I have been able to successfully add the xrange. However, my issue is that after the xrange is added, it changes the display of the chart by changing the min/max values on the y-axis.
I have included...
yAxis: {
startOnTick: false,
endOnTick: false,
},
... on the chart in order for the y-axis range to be auto-zoomed around the min and max ohlc values in focus. But once the xrange is included, I guess it treats "0" as the min y value in the chart, and this is a problem when visualizing currencies whose price ranges are much greater than 0. When this is the case, the inclusion of the xrange significantly stretches the y-axis, and compresses the candlesticks that I want to remain visible.
I would like to keep the chart's zoom adjusted to the min/max visible ohlc values even after the xrange is added.
I have been reviewing the options for xrange series, as well for as the chart yAxis in the api docs. None of them seem to target this behavior, and I have been messing around with some of their configurations anyways, with no luck.
I know that I can define explicit min/max like this:
yAxis: {
min: 18000,
max: 23000,
tickInterval: 1000
},
But I would like to avoid that, since as mentioned above, I would like it to be dynamic to the visible min/max ohlc values.
jsfiddle showing the issue (click the button to add the xrange): https://jsfiddle.net/gheim/hLo3fr1w/6/
p.s. If anyone has suggestions for a different method of adding a movable price line that may be more manageable than an xrange, I am open to suggestions and would appreciate the input.