Charts

Responsive chart components built on Chart.js with Tac UI design tokens. Minimal grid lines, restrained monochrome palette, and clean typography.

Bar Chart

Vertical bars with per-bar color via the chart token palette. Grid lines are near-invisible for a clean canvas.

tsx

<BarChart
  data={[
    { label: 'Jan', value: 42 },
    { label: 'Feb', value: 58 },
    { label: 'Mar', value: 35 },
    { label: 'Apr', value: 71 },
    { label: 'May', value: 63 },
    { label: 'Jun', value: 89 },
  ]}
  colors={[
    'var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)',
    'var(--chart-4)', 'var(--chart-5)', 'var(--chart-6)',
  ]}
  showValues
/>

Line Chart

Smooth line with optional area fill and data points. Uses a single color from the chart palette.

tsx

<LineChart
  data={[
    { label: 'Mon', value: 20 },
    { label: 'Tue', value: 45 },
    { label: 'Wed', value: 38 },
    { label: 'Thu', value: 60 },
    { label: 'Fri', value: 55 },
    { label: 'Sat', value: 30 },
    { label: 'Sun', value: 15 },
  ]}
  showDots
  showArea
/>

Pie Chart

Proportional slices with legend. Borders blend into the background for clean separation.

tsx

<PieChart
  data={[
    { label: 'Desktop', value: 54 },
    { label: 'Mobile', value: 34 },
    { label: 'Tablet', value: 12 },
  ]}
  showValues
/>

Donut Chart

Donut variant with a refined ring width. Hover for percentage tooltips.

tsx

<DonutChart
  data={[
    { label: 'Completed', value: 48 },
    { label: 'In Progress', value: 27 },
    { label: 'Pending', value: 15 },
  ]}
  showValues
/>

API Reference — BarChart

Prop	Type	Default	Description
data	ChartDataPoint[]	-	Array of { label, value } data points to render.
height	number	200	Height of the SVG in pixels.
showGrid	boolean	true	Whether to show horizontal grid lines.
showLabels	boolean	true	Whether to show x-axis labels below bars.
showValues	boolean	false	Whether to show value labels above bars.
color	string	var(--chart-1)	CSS color for all bars.
colors	string[]	-	Per-bar color overrides.

API Reference — LineChart

Prop	Type	Default	Description
data	ChartDataPoint[]	-	Array of { label, value } data points to render.
height	number	200	Height of the SVG in pixels.
showDots	boolean	true	Whether to show dots at each data point.
showArea	boolean	false	Whether to fill the area under the line.
showGrid	boolean	true	Whether to show horizontal grid lines.
color	string	var(--chart-1)	CSS color for the line and dots.
strokeWidth	number	2	Stroke width of the line.

API Reference — PieChart / DonutChart

Prop	Type	Default	Description
data	PieChartDataPoint[]	-	Array of { label, value, color? } data points.
size	number	200	Diameter of the chart in pixels.
variant	"pie" \| "donut"	"pie"	Whether to render as a pie or a donut. DonutChart defaults to "donut".
strokeWidth	number	20	Ring width for the donut variant in pixels.
showLabels	boolean	true	Whether to show the legend below the chart.
showValues	boolean	false	Whether to show percentage values (donut: center total; pie: in slice).