CODEWITHSUNDEEP
highcharts
Johannes Christ
Johannes Christ

Reputation: 109

Highcharts How to change align of data labels based on value

I built a variwide chart with positive and negative values: fiddle

I want to change the align of the data labels of the poisitve values (blue) from right to left.

        series: {
        stacking: 'normal',
        negativeColor: 'rgb(179, 0, 18, .4)',
        threshold: 0,
        dataLabels: {
            allowOverlap: true,
            x: 0,
            align: 'right',
            enabled: true,
            verticalAlign : 'middle',
            formatter: function () {
               return this.point.name + ': ' + Highcharts.numberFormat(Math.abs(this.point.y), 1);
           },
            style: {
                fontFamily: 'Poppins',
                fontWeight:'550',
                color:'#373737',
                fontSize: "14px",
                textOutline: false
        }
        }
    }
}

How can I do this?

Upvotes: 0

Views: 218

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

You can define data label alignment in the complete function:

  data: {
    ...,
    complete: function(data) {
      data.series[0].data.forEach(function(el) {
        el.dataLabels = {
          align: el.y > 0 ? 'left' : 'center'
        }
      });
    }
  }

Live demo: https://jsfiddle.net/BlackLabel/aqn7p51x/

API Reference: https://api.highcharts.com/highcharts/data.complete

Upvotes: 1

Related Questions