Chart

Import

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
} from "@timelycare/helix-ui"

Props

interface ChartConfig {
  [key: string]: {
    label: string
    color?: string  // Use CSS variables like "hsl(var(--chart-1))"
    icon?: React.ComponentType
  }
}

interface ChartContainerProps {
  config: ChartConfig
  className?: string
  children: React.ReactNode
}

Chart Types

Bar Chart

Area Chart

Line Chart

Pie/Donut Chart

Radar Chart

Radial Chart

Chart Colors

Use these CSS variables for data series:

// In chart config
const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "hsl(var(--chart-1))",
  },
  mobile: {
    label: "Mobile", 
    color: "hsl(var(--chart-2))",
  },
}

Common Patterns

Basic Bar Chart

import { Bar, BarChart, XAxis, YAxis } from "recharts"

const data = [
  { month: "Jan", value: 186 },
  { month: "Feb", value: 305 },
  { month: "Mar", value: 237 },
]

const chartConfig = {
  value: { label: "Value", color: "hsl(var(--chart-1))" },
}

<ChartContainer config={chartConfig}>
  <BarChart data={data}>
    <XAxis dataKey="month" />
    <YAxis />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Bar dataKey="value" fill="var(--color-value)" radius={4} />
  </BarChart>
</ChartContainer>

Area Chart with Gradient

import { Area, AreaChart, XAxis, YAxis } from "recharts"

<ChartContainer config={chartConfig}>
  <AreaChart data={data}>
    <defs>
      <linearGradient id="fillValue" x1="0" y1="0" x2="0" y2="1">
        <stop offset="5%" stopColor="var(--color-value)" stopOpacity={0.8} />
        <stop offset="95%" stopColor="var(--color-value)" stopOpacity={0.1} />
      </linearGradient>
    </defs>
    <XAxis dataKey="month" />
    <YAxis />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Area
      dataKey="value"
      type="monotone"
      fill="url(#fillValue)"
      stroke="var(--color-value)"
    />
  </AreaChart>
</ChartContainer>

Line Chart with Multiple Series

import { Line, LineChart, XAxis, YAxis } from "recharts"

const chartConfig = {
  desktop: { label: "Desktop", color: "hsl(var(--chart-1))" },
  mobile: { label: "Mobile", color: "hsl(var(--chart-2))" },
}

<ChartContainer config={chartConfig}>
  <LineChart data={data}>
    <XAxis dataKey="month" />
    <YAxis />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
    <Line dataKey="desktop" stroke="var(--color-desktop)" />
    <Line dataKey="mobile" stroke="var(--color-mobile)" />
  </LineChart>
</ChartContainer>

Donut Chart

import { Pie, PieChart } from "recharts"

const data = [
  { name: "Chrome", value: 275, fill: "var(--color-chrome)" },
  { name: "Safari", value: 200, fill: "var(--color-safari)" },
  { name: "Firefox", value: 187, fill: "var(--color-firefox)" },
]

<ChartContainer config={chartConfig}>
  <PieChart>
    <ChartTooltip content={<ChartTooltipContent />} />
    <Pie
      data={data}
      dataKey="value"
      nameKey="name"
      innerRadius={60}
      outerRadius={80}
    />
  </PieChart>
</ChartContainer>

Tooltip & Legend

// Basic tooltip
<ChartTooltip content={<ChartTooltipContent />} />

// Tooltip with indicator
<ChartTooltip content={<ChartTooltipContent indicator="line" />} />

// Legend
<ChartLegend content={<ChartLegendContent />} />

Accessibility

• Built on Recharts — not a Radix primitive, requires manual a11y
• Provide text alternative: use aria-label or aria-describedby on chart container
• Consider providing a data table fallback for screen readers
• Chart tooltips may not be accessible to keyboard users

Gotchas

See Also

• Related Components: Card (chart wrapper), Table (tabular data complement)
• Tokens: Colors — Chart color tokens

Last updated: February 9, 2026