graphhighchartsgraph-visualizationreact-graph-vis

how to remove "0%" at middle of graph?


I tried "stacking" and "styles" in plotOptions to remove 0% in the middle of my graph. please see my "codepen" example to understand my problem and help me out.

my graph code

 plotOptions: {
                            bar: {
                              stackings: 'normal',
                              dataLabels: {
                                enabled: true,
                                format: '{y} %',
                              },
                              marker: {
                                enabled: false,
                              },
                            },
                            series: {
                              grouping: false,
                            },
                          },

Solution

  • Use formatter function and show data-labels only with different value than 0:

      plotOptions: {
        bar: {
          ...,
          dataLabels: {
            enabled: true,
            formatter: function() {
              if (this.y !== 0) {
                return this.y + ' %';
              }
            }
          }
        }
      }
    

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

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