How to use ChartConfig with remote data?

[predofrazao]

I'm quite confused about ChartConfig, especially in my case where the chart is created by the user. It seems like the same object handle the keys and some values of the chart data object.

I have this data:

type ChartData = {
  [key: string]: unknown;
}

const chartData: ChartData[] = [
  {
    partnerName: "Partner Number One",
    total: 1000
  },
  {
    partnerName: "Partner Number Two",
    total: 6200
  },
  {
    partnerName: "Partner Number Three",
    total: 8000
  },
]

And to create a ChartConfig from this data, I'm using:

// "yAxisKey" and "xAxisKey" is two states that the user manually indicates the properly key of each axis.

const chartConfig = chartData.reduce((acc, data) => {
  const yAxisValue = data[yAxisKey] as string;

  return {
    ...acc,
    [yAxisValue]: {
      label: yAxisValue,
    },
    [xAxisKey]: {
      label: xAxisKey,
    },
  };
}, {}) as ChartConfig;

I can't even use satisfies ChartConfig because TS will give me this error:

Type 'ChartData' does not satisfy the expected type 'ChartConfig'.
  'string' index signatures are incompatible.
    Type 'unknown' is not assignable to type '{ label?: ReactNode; icon?: ComponentType<{}> | undefined; } & ({ color?: string | undefined; theme?: undefined; } | { color?: undefined; theme: Record<"light" | "dark", string>; })'.

And with that, I could properly create a RadialBarChart

import React from "react";
import {
  LabelList,
  PolarGrid,
  RadialBarChart as PrimitiveRadialBarChart,
  RadialBar,
} from "recharts";
import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "../ui/chart";

<ChartContainer config={chartConfig} className="mx-auto aspect-square h-full">
  <PrimitiveRadialBarChart
    data={chartData}
    innerRadius={30}
    startAngle={-90}
    endAngle={380}
    outerRadius={150}
    barSize={50}
  >
    <ChartTooltip
      cursor={false}
      content={<ChartTooltipContent hideLabel nameKey={yAxisKey} />}
    />
    <PolarGrid gridType="circle" />
    <RadialBar dataKey={xAxisKey} fill="hsl(var(--chart-1))" background>
      <LabelList
        position="insideStart"
        dataKey={yAxisKey}
        className="fill-white capitalize mix-blend-luminosity"
        fontSize={11}
      />
    </RadialBar>
  </PrimitiveRadialBarChart>
</ChartContainer>

Despite it worked, I fell that it isn't right. I would appreciate some tips to better handle remote chart data in ChartConfig.

Thanks in advance!

[cristian-sbardelotto-en]

Hi Pedro, I'm in the same situation as you right now. Did you find any answers or suggestions?

[predofrazao]

Hi Cristian, I didn't find any example that would solve my needs, so I find a way by myself.

Take this as an example of returned remote data:

[
  {
     column1: "example",
     column2: 1000,
     column3: 2000,
  }
    // ...
]

What I basically did was:

• Extracted my chart category key from the object, so const categoryKey = "column1";;
• Considered all the remaining keys as "value keys" and put then on an array, const valueKeys = ["column2", "column3"];;

Then I create my ChartConfig from a reduce of valueKeys. The idea is to really use the value as ChartConfig key, so will be like:

const modelConfig = valueKeys.reduce((prev: ChartConfig, valueKey, index) => {
    return {
      ...prev,
      [valueKey]: {
        label: valueKey,
        color: `hsl(var(--chart-${(index % 5) + 1}))`,
      },
    };
  }, {}) satisfies ChartConfig;

This should create your chart, but it will maybe be missing colors, and this was my biggest problem. What happens is that shadcn's chart component creates and injects the chart style as CSS variables, but it breaks when the ChartConfig key has spaces or special characters.

So my idea was create a utility function to replace those special characters and use it in the chart component:

function formatLabelValueCSS<T>(labelValue: T): T {
  if (typeof labelValue === "string") {
    return labelValue?.replace(/\W/g, "-") as T;
  }

  return labelValue;
}

Then in chart.tsx search for:

return color ? `  --color-${key}: ${color};` : null

and replace by:

return color ? `--color-${formatLabelValueCSS(key)}: ${color};` : null

And that's it! You should be able to adapt this to the others chart types as I did. Let me know if something goes wrong or if you need some more information.

Good luck!

[Gabriel-Passoss]

I solved this problem with a mix of @predofrazao's solution and reading the Rechart documentation. Instead of trying to pass the color inside the shadcn Chart component, I used the Cell component from rechart itself to set the color manually.