Consistent colors for stacked bar chart

[sp88011]

How can I use consistent coloring for each stacked bar in my chart like so?

Basically, each bar should start with the first color, and then use subsequent colors. If there's more elements than unique colors, we just start using the first color and so on.

  const colors = [
    "hsl(var(--chart-1))",
    "hsl(var(--chart-2))",
    "hsl(var(--chart-3))",
  ];

//...
   <ChartContainer config={chartConfig} className="h-[300px]">
      <BarChart accessibilityLayer data={transformedData}>
        <CartesianGrid vertical={false} />
        <XAxis
          dataKey="quarter"
          tickLine={false}
          tickMargin={10}
          axisLine={false}
          tickFormatter={formatXAxis}
        />
        <ChartTooltip content={<ChartTooltipContent hideLabel />} />
        {fundNames.map((fundName, idx) => (
          <Bar dataKey={fundName} key={fundName} stackId={"a"} />
//how can I use colors here?
        ))}
      </BarChart>
    </ChartContainer>

I thought this was a pretty common use case but the closest I could find was
#4278 which talks about setting color based off of data. In my case, we don't care about the data in a cell, just the sequence of each cell (is it the first cell? -> use color 1; is it the second cell, use color 2, etc)

[ckifer]

Generally, this isn't a use case that's seen. Instead the colors are always the same for each series (each Bar).

I think you should still be able to accomplish this using Cell though

[sp88011]

Thanks! Any pointers for how I would be able to map over the Cells of a particular (single) parent/series?

The following doesn't work since idx is getting bigger than the number of Cells in a particular series, e.g. idx might be 10 even though I just have 4 cells here.

  {fundNames.map((fundName, idx) => (
          <Bar dataKey={fundName} key={fundName} stackId={"a"}>
            {transformedData.map((entry) => {
              return <Cell fill={colors[idx]} />;
            })}
          </Bar>
        ))}
        ```

[ckifer]

Could you start by making a sandbox by forking this?
https://codesandbox.io/p/sandbox/bar-chart-with-customized-shape-forked-2h7ky5