CODEWITHSUNDEEP
apexcharts
PYG
PYG

Reputation: 347

ApexCharts - Custom bar colour

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

Upvotes: 1

Views: 2042

Answers (1)

Oscar Schafer
Oscar Schafer

Reputation: 1535

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.

Upvotes: 2

Related Questions