How to always show the plotLine in HighCharts?

Question

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.

score 33 · Answer 1 · edited Feb 05 '20 at 08:49

33

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.

edited Feb 05 '20 at 08:49

Calos

1,783
19
28

answered Aug 30 '13 at 23:03

jank

665
6
14

Is it possible to show the y-axis point for the plot line? It is hard to tell the value of the goal line? Thanks! – unj2 Jun 11 '15 at 15:14
label:{text:'450'} replaces "goal" with the value. – jank Nov 12 '15 at 03:03
Your example helped me fix another problem I was having - the gridline would overwrite the label text of the plotline, if one was on top of the other. The "zIndex:4" setting in the plotline definition fixed this, so the label now appears on top of the gridline if they clash! Thanks! – Graphic Equaliser Feb 15 '19 at 14:44

score 19 · Accepted Answer · answered Oct 26 '12 at 13:12

19

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/

answered Oct 26 '12 at 13:12

wergeld

14,332
8
51
81

3

Sad that we need hacks for such things, when I first came across this I strongly thought and I still think its a bug on Highcharts part. Hope @Torstein is reading :) – Jugal Thakkar Oct 26 '12 at 15:03
1

I agree somewhat, @JugalThakkar. An argument can be made both ways as to whether a plot band/line should be always visible. Perhaps make an optional property in the plot band/line setup for "scale chart to always show" might do the trick? Of course this option should not over ride any zooming. – wergeld Oct 26 '12 at 15:34
@wergeld agreed totally about it being more of an option, good point about the zooming too. – Jugal Thakkar Oct 26 '12 at 17:36
1

You can also add a Axis. as needed, rather than an empty data point. I agree that an alwaysShow option would be convenient. – AlexMA Jun 28 '13 at 16:28
Is it possible to show the y-axis point for the plot line? It is hard to tell the value of the goal line? Thanks! – unj2 Jun 11 '15 at 15:14
@unj2, yes, just set the `label.text` to what your value is as well. – wergeld Jun 11 '15 at 15:40

score 3 · Answer 3 · answered Feb 09 '18 at 11:38

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/

score 0 · Answer 4 · answered Feb 05 '20 at 01:47

0

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

yAxis: {

            max:650 //HERE
            plotLines...

        },

answered Feb 05 '20 at 01:47

Angel Yadir Soto Delgado

1
1

score 0 · Answer 5 · answered Aug 15 '22 at 16:12

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]
    }]
  });
});

How to always show the plotLine in HighCharts?

5 Answers5

Linked