CODEWITHSUNDEEP
javascripthighcharts
Georges Legros
Georges Legros

Reputation: 2504

Highchart Axis with only min and max series value

In the charts of our application, we would like to avoid polluting the screen with too much information.

We need to have an axis that displays only the lowest and highest value.

Does anybody know how to do that with Highchart?

That would then be something like that

Chart as we want to see it

PS: ignore the vertical gray bands behind the chart, that's a totally unrelated.

Upvotes: 1

Views: 2632

Answers (4)

jlbriggs
jlbriggs

Reputation: 17791

A demonstration of the tickPositions method:

First, define your data array and loop through it to find your min and max:

var chartData = [...], yMin, yMax;

$.each(chartData, function(i,point) {
    yMin = i == 0 ? point : (point < yMin ? point : yMin);
    yMax = i == 0 ? point : (point > yMax ? point : yMax);
});

Then, in your yAxis properties:

tickPositions: [Math.round(yMin), Math.round(yMax)],

Example:

EDIT for comment

Ah, yes, of course.

You can fix the ticks being the absolute min and the max by adding a couple more properties to the y axis:

      min:0,
      max: (yMax * 1.1),
      startOnTick:false,
      endOnTick:false,

Updated example:

Upvotes: 3

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

You can use also tickPositioner which extracts min/max from data and return array of two values.

yAxis: {
  tickPositioner: function() {
    return [this.dataMin, this.dataMax];
  }
},

Example: - http://jsfiddle.net/rchdfb0z/

Upvotes: 3

mustapha mekhatria
mustapha mekhatria

Reputation: 3909

Here is an example jsfiddle.

All you have to do it is just:

  1. define your Min and Max.
  2. grab your data from your source (in this case is a Json file)
  3. select only data between Ymin and Ymax

  4. save them in a new array (arrData).

    $(function () {

        $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
            var arrData=[];
        var i,Ymin,Ymax;
    Ymin=20;//minmun value of Y data
    Ymax=40;//max value of Y data

    //selec only data between Ymin and Ymax
    for(i=0;i<data.length;i++){
        if(data[i][1]> Ymin && data[i][1]<Ymax){
        arrData.push(data[i][1]);
      };
    }

    // Create the chart
    $('#container').highcharts('StockChart', {


        rangeSelector : {
            selected : 1
        },

        title : {
            text : 'Min/Max Y data'
        },

        series : [{
            name : 'Min Max Y',
            data : arrData,
        }]
    });
});

    });

Upvotes: 1

DrMacak
DrMacak

Reputation: 15

If I understand correctly your question, you want to plot two lines on min and max values. This should be easily possible with Axis.addPlotLine. I would check the input data for min/max values and then add plot lines. As on this DEMO.

Upvotes: 0

Related Questions