Colors from data not being displayed in Nivo ResponsiveBar

I have a ResponsiveBar component in my React app, but the colors are not being displayed as intended. I have followed the guidelines in the official docs. the data looks like this:

{
      "bucket": "Assigned",
      "Oliver Queen": 158,
      "Oliver QueenColor": "hsl(130.29946551632844,21.88588940442986%,85.78716216902176%)",
      "Ray Palmer": 2,
      "Ray PalmerColor": "hsl(192.1716868789712,1.8797192964029374%,7.158239130186517%)"
    },
    {
      "bucket": "Calls Made",
      "Oliver Queen": 24,
      "Oliver QueenColor": "hsl(164.04170858156496,47.95430493222506%,79.37512126292603%)",
      "Ray Palmer": 0,
      "Ray PalmerColor": "hsl(38.148811405937096,23.83917214972724%,37.366418973565544%)"
    },
    {
      "bucket": "Emails Sent",
      "Oliver Queen": 120,
      "Oliver QueenColor": "hsl(316.96830604521773,3.6081626612787465%,54.49458825991964%)",
      "Ray Palmer": 0,
      "Ray PalmerColor": "hsl(223.97078722168806,98.41710495281106%,47.3590863956761%)"
    },
    {
      "bucket": "Texts Sent",
      "Oliver Queen": 0,
      "Oliver QueenColor": "hsl(83.50359081784423,77.57558426662207%,3.9445038120280884%)",
      "Ray Palmer": 0,
      "Ray PalmerColor": "hsl(127.2531925420342,14.870911431246302%,27.26153404734799%)"
    }
  ],
  "keys": [
    "Oliver Queen",
    "Ray Palmer"
  ]
}

I am passing the data and keys as props to the ResponsiveBar. currently the bar chart looks like this with wrong colors:

as you can see the colors from the data are not reflected.

here is my ResponsiveBar component:

<ResponsiveBar
                    data={chartListSection.data}
                    keys={chartListSection.keys}
                    indexBy="bucket"
                    margin={{ top: 50, right: 50, bottom: 110, left: 60 }}
                    padding={0.3}
                    valueScale={{ type: 'linear' }}
                    indexScale={{ type: 'band', round: true }}
                    colors={{ scheme: 'nivo' }}
                    defs={[
                      {
                        id: 'dots',
                        type: 'patternDots',
                        background: 'inherit',
                        color: '#38bcb2',
                        size: 4,
                        padding: 1,
                        stagger: true,
                      },
                      {
                        id: 'lines',
                        type: 'patternLines',
                        background: 'inherit',
                        color: '#eed312',
                        rotation: -45,
                        lineWidth: 6,
                        spacing: 10,
                      },
                    ]}
                    borderColor={{
                      from: 'color',
                      modifiers: [['darker', 1.6]],
                    }}
                    axisTop={null}
                    axisRight={null}
                    axisBottom={{
                      tickSize: 5,
                      tickPadding: 5,
                      tickRotation: 0,
                      legend: '',
                      legendPosition: 'middle',
                      legendOffset: 32,
                    }}
                    axisLeft={{
                      tickSize: 5,
                      tickPadding: 5,
                      tickRotation: 0,
                      legend: 'Prospects',
                      legendPosition: 'middle',
                      legendOffset: -53,
                    }}
                    labelSkipWidth={12}
                    labelSkipHeight={12}
                    labelTextColor={{
                      from: 'color',
                      modifiers: [['darker', 1.6]],
                    }}
                    legends={[
                      {
                        dataFrom: 'keys',
                        anchor: 'bottom-left',
                        direction: 'row',
                        justify: false,
                        translateX: 0,
                        translateY: 90,
                        itemsSpacing: 2,
                        itemWidth: 100,
                        itemHeight: 20,
                        itemDirection: 'left-to-right',
                        itemOpacity: 0.85,
                        symbolSize: 20,
                        effects: [
                          {
                            on: 'hover',
                            style: {
                              itemOpacity: 1,
                            },
                          },
                        ],
                      },
                    ]}
                    animate={true}
                    motionStiffness={90}
                    motionDamping={15}
                  />

How do make the colors from data display in the bar?

[monzilnepali]

The problem here is you are using the color schema provided by nivo so that it is showing color based on that schema. In order to override with your custom color, you need to pass function on the colors prop which will return the desired color value.

<ResponsiveBar
...
 colors={(barData) => {
          return barData.data[`${barData.id}Color`]
 }}
....
/>

[gpalrepo]

@plouc, thanks for your fast response. I have opened another issue #1559 so the solution will be more easily searchable.