Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highcharts - set maximum range for yAxis but keep axis dynamic within that range

First of all, apologies for the post title, but I failed to come up with a better one to describe my problem.

Is there a way in highcharts to set the maximum value for the yAxis to, say, 1000 (i.e. via max: 1000) but keep it dynamic if the maximum values are lower than the set maximum? As an example, let's say we have two datasets.

The first one ranges between 0 and 1500. Here any data >1000 should not be displayed. Setting yAxis: { max: 1000 } does the trick.

Now we update the data series with the second data set which ranges between 0 and 48. Now max: 1000 causes the line to virtually hug the x-axis. So here it would be best if Highcharts dynamically adjusts the yAxis to range from 0-50.

Here's a fiddle to illustrate the problem: http://jsfiddle.net/PanicJ/s7fZu/1/

P.S. Just noticed the minRange setting in Highcharts. Now, why isn't there a maxRange equivalent? Or is there?

like image 257
Tomm Avatar asked Jun 25 '13 01:06

Tomm


Video Answer


1 Answers

It seems that there is no maxRange equivalent (feature request, Torstein?) so that the axis maximum has to be determined before Highcharts is called. Building upon Sanath's suggestion a solution would be this:

$(function () {
   var setA = [29.9, 11.5, 36.4, 19.2, 4.0, 46.0, 48.2, 15.2, 16.4, 4.1, 5.6, 44.4];
   var setB = [129.2, 144.0, 176.0, 135.6, 248.5, 316.4, 694.1, 795.6, 954.4, 1029.9, 1171.5, 1506.4];
   var data = Math.random() < 0.5 ? setA : setB;
   var height=Math.max.apply(Math, data);
   if(height > 1000){ height = 1000; }

   $('#container').highcharts({
       chart: {
           marginRight: 80 // like left
       },
       xAxis: {
           categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
       },
       yAxis: [{
           lineWidth: 1,
           max: height,
           min: 0,
           title: { text: 'yAxis' }
       }],
       series: [{
           data: data
       }]
   });
});

As working example: http://jsfiddle.net/PanicJ/H2pyC/8/

like image 83
Tomm Avatar answered Oct 24 '22 17:10

Tomm