Set HighChart yAxis's min max to a specific series only

问题:

I have a stock price candlestick series And a line series that share yAxis with the candlestick series. By default, the API automatically set chart's yAxis range to the min/max of two series's min/max(candlestick series, line series)

But I want to show the candlestick series more importantly than line chart. So, chart's yAxis min/max should be limited only the candlestick series even if it cut the line series off.

And the yAxis min/max should be adjusted when the chart is scrolled dynamically.

How can I do that?

jsfiddle simple code

var chartData = [   [1473687000000, 102.65, 105.72, 102.53, 105.44],   [1473773400000, 107.51, 108.79, 107.24, 107.95],   [1473859800000, 108.73, 113.03,  108.6, 111.77],   [1473946200000, 113.86, 115.73, 113.49, 115.57] ];      var avgData = [   [1473687000000, 250],   [1473773400000, 300],   [1473859800000, 280],   [1473946200000, 290] ];  $(function() {   Highcharts.stockChart('container', {     // title: {text: '---'},     rangeSelector: {       buttons: [         // { type: 'hour', count: 1, text: '1h' },         { type: 'day', count: 1, text: '1d' },         // { type: 'all', count: 1, text: 'All' }       ],       selected: 1,       //inputEnabled: true     },     xAxis: [{       type: 'datetime',          }],     yAxis: [{       labels: {         align: 'right',         x: -3       },       title: {text: 'OHLC'},       height: '100%',       lineWidth: 2,       resize: {         enabled: true       }     }],       plotOptions: {       candlestick: {         downColor: 'blue',         upColor: 'red',         dataGrouping: {           enabled: false,         }       }     },      series: [{       name: 'ohlc',       type: 'candlestick',       data: chartData,     }, {       name: 'avg',       type: 'line',       data: avgData,     }]   }); });

dic#container {height: 100%; width: 100%;}

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script> <script src="//code.highcharts.com/stock/highstock.js"></script> <script src="//code.highcharts.com/stock/modules/drag-panes.js"></script> <script src="//code.highcharts.com/stock/modules/exporting.js"></script> <div id="container"></div>

回答1:

In 'afterDrawChartBox' event, you can use setExtremes method with min and max values from candlestick series:

Highcharts.addEvent(Highcharts.Chart, 'afterDrawChartBox', function(e) {     var candlestick = this.series[0];     this.yAxis[0].setExtremes(candlestick.dataMin, candlestick.dataMax, true, false); }); 

Live demo: https://jsfiddle.net/BlackLabel/520km1wv/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

文章来源: Set HighChart yAxis's min max to a specific series only