CODEWITHSUNDEEP
highcharts
HRJ
HRJ

Reputation: 17767

How to always show the plotLine in HighCharts?

I am creating a HighChart with a plotLine in it. The plotLine has a fixed value, while the data can vary between charts.

HighChart scales the y-axis automatically based on the maximum value of data, but it doesn't consider the plotLine's value in its calculations.

Hence, if the data range encompasses the plotLine value, the plotLine gets shown, but gets cropped out of the viewport if not.

Example:

    $(function () {
        $(document).ready(function() {
            var chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    type: 'column'
                },
                title: {
                    text: 'Dummy Data by Region'
                },
                xAxis: {
                    categories: ['Africa', 'America', 'Asia']
                },
                yAxis: {
                    plotLines:[{
                        value:450,
                        color: '#ff0000',
                        width:2,
                        zIndex:4,
                        label:{text:'goal'}
                    }]
                },
                series: [{
                    name: 'Year 1800',
                    data: [107, 31, 650]
                }]
            });
        });
        
    });​

JSFiddle for above code: http://jsfiddle.net/4R5HH/3/

The goal line (in red) is shown for the default data, but if I change the data to [107, 31, 250], then the plotLine goes out of the graph viewport and hence becomes invisible.

Upvotes: 24

Views: 23132

Answers (5)

user3740082
user3740082

Reputation: 129

Adjust the axis while loading the chart:

$(function() {
  $('#container').highcharts({

    chart: {
      events: {
        load: function() {
          var check = $('#container').highcharts();
          var min = check.yAxis[0].min;
          var max = check.yAxis[0].max;
          var pLine = check.yAxis[0].chart.options.yAxis[0].plotLines[0].value;
          if (pLine > max) {
            check.yAxis[0].setExtremes(null, pLine);
          }
          if (pLine < min) {
            check.yAxis[0].setExtremes(pLine, null);
          }

        }
      }
    },


    xAxis: {
      categories: ['Jan', 'Feb', 'Mar'],
    },

    yAxis: {
      minPadding: 0.30,
      plotLines: [{
        color: '#FF0000',
        width: 2,
        value: 200
      }]
    },
    series: [{
      data: [70, 60, 95]
    }]
  });
});

Upvotes: 0

jank
jank

Reputation: 685

One other option that does not introduce data points:

yAxis: {
    minRange:450,
    min:0,
    plotLines:[{
        value:450,
        color: '#ff0000',
        width:2,
        zIndex:4,
        label:{text:'goal'}
    }]
},

This sets the minimum for the yAxis to 0 (this is unlikely to be false in this case) and the minimum Range to 450.

See updated fiddle.

Upvotes: 34

Angel Yadir Soto Delgado
Angel Yadir Soto Delgado

Reputation: 1

You could simply set the max attribute to the max value you will have:

yAxis: {

            max:650 //HERE
            plotLines...

        },

Upvotes: 0

Debiprasad
Debiprasad

Reputation: 6173

In some cases, wergeld's solution would be preferable than jank's solution, especially when you are not sure about min and minRange. But wergeld's solution has a minor issue. If you point your mouse over the plot line, it will show a point and tooltip on the point. To avoid this, I have modified his solution and added enableMouseTracking to get rid of the problem. 

{
     name: 'Goal',
     type: 'scatter',
     marker: {
          enabled: false
     },
     data: [450],
     enableMouseTracking: false
}

See updated jsFiddle: http://jsfiddle.net/4R5HH/570/

Upvotes: 3

wergeld
wergeld

Reputation: 14442

You need to add in a point to you chart but disable the marker. I added a new series with scatter plot type and its value equal to the goal value:

{
     name: 'Goal',
     type: 'scatter',
     marker: {
          enabled: false
     },
     data: [450]
}

See updated jsFiddle: http://jsfiddle.net/wergeld/4R5HH/4/

Upvotes: 20

Related Questions