Reputation: 27
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
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