Highcharts Line Chart, display series name at the

问题:

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?

回答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:

回答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/