Home > OS >  How do I change the bar colors on Ant Design Chart
How do I change the bar colors on Ant Design Chart

Time:06-14

I am implementing this chart: https://charts.ant.design/en/examples/column/percent#basic

I need to change the colors.

How do I change each of the 3 colors within the bar?

CodePudding user response:

It's very easy, just add a color configuration -

color: ['#d62728', '#2ca02c', '#000000'],

You can add as many colors. Order is preserved from top to bottom. A single color would mean all stacks would have the same color. You can also return a function with additional logic -

color: ({ type }) => {
    if(type === 'some condition'){
      return '#2ca02c';
    }
    return '#d62728';
  }
  • Related