CODEWITHSUNDEEP
javascriptchartshighcharts
user6096856
user6096856

Reputation: 291

Highcharts Line Chart, display series name at the end of line series

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.

enter image description here

How can we achieve this?

Upvotes: 0

Views: 4852

Answers (2)

jlbriggs
jlbriggs

Reputation: 17791

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:

Output example:

enter image description here

Upvotes: 5

stpoa
stpoa

Reputation: 5573

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/

Upvotes: 1

Related Questions