ChartStyle() — ui Function Reference

Architecture documentation for the ChartStyle() function in chart.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ChartStyle() — ui Function Reference

Dependency Diagram

graph TD
  e3cc7d9a_9698_ab1e_c0e1_6e3b32d0c6c6["ChartStyle()"]
  bca50faa_8d6b_703f_dfd2_c4cbfa71c486["chart.tsx"]
  e3cc7d9a_9698_ab1e_c0e1_6e3b32d0c6c6 -->|defined in| bca50faa_8d6b_703f_dfd2_c4cbfa71c486
  style e3cc7d9a_9698_ab1e_c0e1_6e3b32d0c6c6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/ui/chart.tsx lines 72–103

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
    return color ? `  --color-${key}: ${color};` : null
  })
  .join("\n")}
}
`
          )
          .join("\n"),
      }}
    />
  )
}