I struggle to add a label on top of a line in highcharts .. for example suppose I have 4 series (all visible) with name 'data', 'mean', '+1 std', '-1 std':

And I would like as a result:

I am lost to know how to add it ... even with the documentation it seems I need the abscissa and ordinate to add for each label. How can I retrieve this information? Is it possible to add the label directly when I add the series?

        chart.addSeries({
            id           : 'mean',
            name         : 'mean',
            type         : 'line',
            lineWidth    : 1,
            lineColor    : 'rgba(0,128,0,0.9)',
            color        : 'rgba(0,128,0,0.9)',
            dashStyle    : 'LongDash',
            zIndex       : 5,
            data         : [[ext.dataMin, mean], [ext.dataMax, mean]],
            enableMouseTracking: false
        });

Notice that I do not want to display this information in a legend, but on the chart itself-

I struggle to add a label on top of a line in highcharts .. for example suppose I have 4 series (all visible) with name 'data', 'mean', '+1 std', '-1 std':

And I would like as a result:

I am lost to know how to add it ... even with the documentation it seems I need the abscissa and ordinate to add for each label. How can I retrieve this information? Is it possible to add the label directly when I add the series?

        chart.addSeries({
            id           : 'mean',
            name         : 'mean',
            type         : 'line',
            lineWidth    : 1,
            lineColor    : 'rgba(0,128,0,0.9)',
            color        : 'rgba(0,128,0,0.9)',
            dashStyle    : 'LongDash',
            zIndex       : 5,
            data         : [[ext.dataMin, mean], [ext.dataMax, mean]],
            enableMouseTracking: false
        });

Notice that I do not want to display this information in a legend, but on the chart itself-

• javascript
• highcharts

Share Improve this question Follow asked Jan 13, 2016 at 13:49 Colonel BeauvelColonel Beauvel 31.2k1111 gold badges4848 silver badges8888 bronze badges 1

• You can use renderer , replace your lines with plotLines and use label – Sebastian Bochan Commented Jan 13, 2016 at 14:49

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You can do this with a dataLabel.

If you disable dataLabels in the plotOptions, but enable them on the first point of each series, you will get exactly what you're asking for.

Code example:

   data: [
    {
        x:0,
      y:5,
      dataLabels:{ 
        enabled: true,
        format: 'label 1: {y}'
      }
    },
    [10,5]
  ] 

Fiddle example:

• http://jsfiddle/jlbriggs/vtmqLzer/