Specific color for specific bar

Hi,

Was just wondering if there is a way to set a color to a bar in a ResponsiveBar chart For example: my keys for bar chart is keys={['2017', '2018', '2019']}

So when I render data just of the key 2017 or 2018 or 2019, I want those bar color to be associated with a single color, as 2019 bar will always show green in color.

[plouc]

you can use a custom function for the colors property, for example:

const colors = { '2017': 'red', '2018': 'red', '2019': 'green' }
const getColor = bar => colors[bar.id]

const MyBar = () => <Bar colors={getColor} {...otherProps} />

[fillippeyton]

In case anyone wants to use a color property in the data itself (like the docs), here’s what I’m doing:

const data = [
  {
    id: 'views',
    color: '#00f,
    data: [
      {...},
    ],
  },
  {
    id: 'engagements',
    color: "#f00",
    data: [
      {...},
    ],
  },
];

// render
<ResponsiveLine data={data} colors={d => d.color} />