ApexCharts - Custom bar colour

user_2422309 0
Viewed 156

Is it possible to customise the colour of each bar in a column chart ?

This is the kind of data I'm having using React:

const [data, setData] = useState([{
    data: [{
        x: 'Apple',
        y: 54,
        color: '#CCCCCC'
    }, {
        x: 'Orange',
        y: 66,
        color: '#FF0000'
    }]
}]);

But the colours here is are not applied to the chart.

I've tried with the 'distributed' option set to true as well.

plotOptions: {
        bar: {
            distributed: true,
        },
    },
apexcharts
1 Answers

There are two ways to achieve this, you're very close to both of them.

1. Pass the color with the data

Very similar to what you've tried, but use fillColor as the key instead.

data: [{
        x: 'Apple',
        y: 54,
        fillColor: '#CCCCCC'
    }, {
        x: 'Orange',
        y: 66,
        fillColor: '#FF0000'
    }]

2. distributed option

For this to work, it needs to be nested inside the options object:

options: {
  plotOptions: {
    bar: {
      distributed: true
    }
  }
},

If this doesn't work, it's worth making sure that there aren't any invalid attributes (e.g. color) somewhere that might be causing issues.

As I'm sure you've already discovered, there are some examples of various ways to use colors in a column chart in the ApexCharts docs.

user_20645960
Related