kevinabraham kevinabraham - 4 months ago 59
Javascript Question

How to make plotline appear on line chart when data is same highcharts?

Im trying to add a plot line to a line chart. When the data is same e.g [7.0, 7.0, 7.0] the plot line doesn't show. But when the data is up and down then the plot line shows e.g [7.0, 8.0, 7.0]. Is there a way to make the plot line show when the data is the same? JSFiddle

My high chart set up is:

$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines:[{
value:10,
color: '#ff0000',
width:2,
zIndex:4,
label:{text:'goal'}
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 7.0, 7.0, 7.0]
}]
});
});

Answer

Your problem is connected with how your yAxis look right now. When you have the same y value of your data, your yAxis has the same min and max. For example if you have data: [7.0, 7.0, 7.0, 7.0], your yAxis min and max is equal to 7.

If your plotLine has value:10, you cannot see it in your chart. To see this plotLine you can manually set min and max of your yAxis:

yAxis: {
  min: 5,
  max: 10,
  title: {
    text: 'Temperature (°C)'
  },
  plotLines: [{
    value: 10,
    color: '#ff0000',
    width: 2,
    zIndex: 4,
    label: {
      text: 'goal'
    }
  }]
},

Here you can see an example: http://jsfiddle.net/g34pk5tc/3/

To make possibility of changing extremes in your yAxis, better idea will be to add series with invisible point, where y value of this point will be equal to value of your plotLine. Here you can see an example how it can work:

function(chart) {
    chart.addSeries({
      showInLegend: false,
      enableMouseTracking: false,
      data: [10],
      marker: {
        enabled: false
      }
    })
  }

http://jsfiddle.net/g34pk5tc/4/