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

Question

Im trying to add a plot line to a line chart. When the data is same eg [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 eg [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 1

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/