Victory Native, Bar chart, each bar own color?

Question

I am trying to create these colors for each bar chart, where each bar is its own color

I was hoping to reference the index of each bar to the color map:

const colorMap = [
    '#851b48',
    '#96324d',
    '#a64851',
    '#b75f56',
    '#c8765a',
    '#d88c5f',
];

My Bar Component:

<VictoryChart
                domainPadding={40}
                padding={{ bottom: 40, top: 10, right: 0, left: 0 }}
                width={Dimensions.get('screen').width - 48}
            >
                <VictoryBar
                    animate={{
                        duration: 2000,
                        onLoad: { duration: 1000 },
                    }}
                    barWidth={16}
                    data={data}
                    horizontal
                    labelComponent={<VictoryLabel dy={-16} x={-8} />}
                    labels={data => {
                        return `${data.datum.variety} ${Math.round(
                            data.datum.count, // animation causes slight rounding issues
                        )}`;
                    }}
                    style={{
                        labels: {
                            fontSize: 10,
                        },
                        data: { fill: colorMap },
                    }}
                    x={x}
                    y={y}
                />
                <VictoryAxis dependentAxis offsetY={55} />
            </VictoryChart>

How would I color each bar to reference the index of the map? I am sure there is a filter or some other fancy SVG option I just don't know about

Answer 1

turns out there's a function callback:

data: {
  fill: ({ index }) =>
    typeof index === 'number'
      ? colorMap?.reverse()[index as number]
    : colorMap[0],
  },