Bar Chart Labels

Hi all,

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:

I already tried out using 2 metrics (using one for positive values and another for negative values).

I already tried out to insert 0s for empty cells. But nothing helped.

Any recommendations? :-/

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',
          },
        },
      }
    }]
  }],

}

1 Like