CODEWITHSUNDEEP
javascriptjquerychartshighcharts
kevinabraham
kevinabraham

Reputation: 1437

How to show plotlines on highstock when its set much higher than the data series?

I have a highstock chart. In that chart I want to set a plotline for a target a user might enter for example. 

yAxis: {
        plotLines: [{
            value: 1000,
            color: 'red',
            dashStyle: 'shortdash',
            width: 2,
            label: {
                text: 'Target'
            }
        }]
},

If the target is within the min and max data range of the series then it shows up on the chart like this: jsFiddle.

But if the plotline is set much higher than the min or max data series then the plotline doesn't show on the chart at all like this: jsFiddle. How can I make sure the plotline shows up on the highstock chart no matter what number the target is?

Upvotes: 2

Views: 280

Answers (1)

Grzegorz Blachliński
Grzegorz Blachliński

Reputation: 5222

I think that one idea is to use yAxis.min and yAxis.max for setting the min and max of your axis that will meet your requirements. Here you can find an example how it can work: 

  yAxis: {
    max: 1200,
    plotLines: [{
      value: 1100,
      color: 'red',
      dashStyle: 'shortdash',
      width: 2,
      label: {
        text: 'Target'
      }
    }]
  },

http://jsfiddle.net/bo36afyt/1/

You can also add an invisible series that will take part in calculating your extremes: 

var data2 = [];
Highcharts.each(data, function(p, i) {
  data2.push([p[0], 1100]);
});


  series: [{
    name: 'AAPL',
    data: data,
    tooltip: {
      valueDecimals: 2
    }
  }, {
    name: 'ghost',
    data: data2,
    enableMouseTracking: false,
    color: 'rgba(0,0,0,0)'
  }]

http://jsfiddle.net/bo36afyt/2/

Upvotes: 2

Related Questions