Colors from data not being displayed in Nivo ResponsiveHeatMap

Suppose I am inputting the following data into my ResponsiveHeatMap

const data = [
    {
      resultID: 'shopping',
      accepted: 2,
      acceptedColor: 'hsl(130,72%,65%)',
      exception: 0,
      exceptionColor: 'hsl(72,72%,44%)'
    }
    .
    .
    .
  ]

I am currently passing the following into the colors prop and it’s not working.

  colors={({mapData}) => {
       return mapData.data[`${mapData.id}Color`]
  }}

I have checked out the following issues but they appear ResponsiveBar specific and aren’t useful for Responsive Heatmaps #581 #1417

[wyze]

Can you show a full example of the code you are trying and we should be able to get it to work?

[wyze]

You need to process your colors to an array first and then pass it to colors property. See https://codesandbox.io/s/long-cherry-prbfw?file=/src/charts/HeatMap.tsx

const keys = [ ... ]
const props = { keys, ... }

function MyHeatMap({ data }) {
  const colors = props.keys.map(key => data[0][`${key}Color`]) as string[]

  return <HeatMap colors={colors} data={data} {...props} />
}