Function ChartStyle

packages/react/src/components/chart.tsx:90–120

({ id, config }: { id: string; config: ChartConfig })

}

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);

  if (!colorConfig.length) {
    return null;
  }

  return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ?? itemConfig.color;
    const variableName = chartCssVariableName(key);
    const colorValue = color ? chartCssColorValue(color) : null;
    return variableName && colorValue ? `  ${variableName}: ${colorValue};` : null;
  })
  .filter((line): line is string => line !== null)
  .join("\n")}
}
`,
          )
          .join("\n"),
      }}
    />
  );
};

const ChartTooltip = RechartsPrimitive.Tooltip;