I am facing a challenging problem while preparing a (stacked) bar chart. Within our business, we use bar charts with negative and positive values - so red and green. The data labels are on the left side for negative values and on the right for positive values.
But unfortunately, the bar charts always look like this:
You cannot conditionally format value labels using the chart settings UI. Instead, you need to edit the Chart Config for the chart and specify the placement for data labels based on whether the value is positive or negative:
{
series: [{
formatters: [{
select: 'value < 0', // format for negative values
style: {
dataLabels: {
enabled: true,
align: 'left', // can also be set to 'center' or 'right'
verticalAlign: 'middle', // can also be set to 'top' or 'bottom'
x: -40, // adjust to offset the horizontal position of label
style: {
color: '#e63e2a', // specify colour of labels
},
},
}
},{
select: 'value >= 0', // format for positive values
style: {
dataLabels: {
enabled: true,
align: 'right',
verticalAlign: 'middle',
x: 40,
style: {
color: '#3e9630',
},
},
}
}]
}],
}