Highcharts Line Chart, display series name at the

Question

We have requirement for line chart as below. We are using highcharts. Our requirement is that chart should display series name at the end of line as displayed in below images.

How can we achieve this?

Answer 1

As an alternative to the renderer(), I find it convenient to use the dataLabels for this purpose.

The idea being to disable dataLabels in the plotOptions, but define the position and format anyway.

Then enable the dataLabels for the last point in each series' data array.

Example:

plotOptions: {
  series: {
    dataLabels: {
      enabled: false,
      crop: false,
      overflow: 'none',
      align: 'left',
      verticalAlign: 'middle',
      formatter: function() {
        return '<span style="color:'+this.series.color+'">'+this.series.name+'</span>';
      }
    }
  }
}

Fiddle:

• http://jsfiddle.net/jlbriggs/pgo7pedn/

Output example:

Answer 2

Get last point, which has plotX and plotY properties, then draw your labels with render.

const options = {
  chart: {
    events: {
      load() {
        const chart = this
        const series = chart.series

        series.forEach((s) => {
          const len = s.data.length
          const point = s.data[len - 1]
          console.log(point)

          chart.renderer.text(
            point.series.name,
            point.plotX + chart.plotLeft + 10,
            point.plotY + chart.plotTop - 10
          )
          .attr({
            zIndex: 5
          })
          .add()
        })
      }
    }
  },
  xAxis: {
    max: 5
  },
  series: [{
    data: [30, 70, 50, 90]
  }, {
    data: [60, 100, 80, 120]
  }, {
    data: [80, 150, 90, 180]
  }]
}

const chart = Highcharts.chart('container', options)

Live example:

https://jsfiddle.net/479vdhm3/