javascripthighchartslabeltargetbullet

HighCharts Bullet Chart display data label of the target

I use Highchart bullet module to create a multiple bullet chart (horizontal or vertical). An example of a chart here : https://jsfiddle.net/vegaelce/n5wjaf2e/

I can add datalabels for the main measure value with the following option :

plotOptions: {
        series: {           
            dataLabels: {
                enabled: true,
                inside: true
            },

but I want to display the label of the main measure AND the label of the target but there is no option to add the datalabel of the target measure (orange tick measure on my jsfiddle).

How can I do that ?

Thanks in advance

Solution

  • You can define the dataLabels config as an array of objects, which means that more than one dataLabel can be added, next use the dataLabels.formatter callback to return the target value.

      dataLabels: [{
    enabled: true,
    inside: true
  }, {
    enabled: true,
    formatter() {
        //console.log(this)
        return this.point.target
    }
}],

    Demo: https://jsfiddle.net/BlackLabel/2fxL03gz/

    API: https://api.highcharts.com/highcharts/series.line.dataLabels.formatter