CODEWITHSUNDEEP
javascriptcssangularhighchartsangular2-highcharts
jayanti khutwad
jayanti khutwad

Reputation: 27

why stack labels are overlap on bar highcharts

I wanted to show all stack labels on stack bar chart

I use the following properties:

      yAxis: {
        reversedStacks: false,
        min: 0,
        stackLabels: {
          endOnTick: this.reportData.showChartOnly ? false : true,
          enabled: true,
          allowOverlap: true,
          // overflow: 'none',
          crop: false,
          useHTML: true,
          inside: false,
          // overflow: 'allow',
          style: {
            fontWeight: 'normal',
            color: "#312e2e",
            fontFamily: 'Lato',
          },
          x: 8,
          y: -2,
          formatter: function () {
            let convertedValue = this.total != null && this.total != 0 ? parent.reportUtilService.convertUnit(this.total, parent.unit) : { data: this.total, unit: parent.unit };
            let value = parent.reportData.viewDef.showDecimalValue ? convertedValue.data : Highcharts.numberFormat(this.total, 0)
            return value + " " + convertedValue.unit;
          },
        },

But some values are overlapped on the bars

Upvotes: 1

Views: 356

Answers (1)

webblover
webblover

Reputation: 1226

This is the same issue. I solved it with following option,

stackLabels: {
  enabled: true,
  crop: false,
  overflow: 'allow',
}

Now, the labels appear outside the bars without overlapping it.

 /**
     * (Highcharts) How to handle stack total labels that flow outside the plot
     * area. The default is set to `"justify"`, which aligns them inside the
     * plot area. For columns and bars, this means it will be moved inside the
     * bar. To display stack labels outside the plot area, set `crop` to `false`
     * and `overflow` to `"allow"`.
     */

Upvotes: 0

Related Questions