How can I format DataLabels in angular-highcharts

Question

I want to show dataLabels only if its value is not 0. and dont want to show 0 on UI charts.ts code is mentioned below:

  plotOptions: {
    series: {
      states: {
        inactive: {
          opacity: 1,
        },
      },
      dataLabels: {
        enabled: true,
        inside: true,
        format: '{y}',
        showInLegend: false,
      },
      stacking: 'normal',
    },

    bar: {
      stacking: 'normal',
      borderWidth: 0,
      states: {
        hover: {
          enabled: false,
        },
      },
    },
  },

cfprabhu · Answer

Use format function

plotOptions: {
        series: {
          states: {
            inactive: {
              opacity: 1,
            },
          },
          dataLabels: {
            enabled: true,
            inside: true,
            format: function(){
               return (this.y != 0) ? this.y : "";
            },
            showInLegend: false,
          },
          stacking: 'normal',
        },
    
        bar: {
          stacking: 'normal',
          borderWidth: 0,
          states: {
            hover: {
              enabled: false,
            },
          },
        },
      },

ppotaczek · Answer

You need to use formatter function for data labels. For example:

  dataLabels: {
    ...,
    formatter: function() {
      return this.y || '';
    }
  }

Live demo: http://jsfiddle.net/BlackLabel/w82kr9fx/

API Reference: https://api.highcharts.com/highcharts/series.bar.dataLabels.formatter

How can I format DataLabels in angular-highcharts

2 Answers