Other

Chart

Dependency-free static SVG chart: line, area, bar, pie and donut. Accepts labels plus one or more datasets, colors series from the token palette and titles every point for hover tooltips.

Import

import { Chart } from "@zephora/react";

Examples

Line and area

Revenue
Costs

const data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
  datasets: [
    { label: "Revenue", data: [12, 19, 14, 25, 22, 30] },
    { label: "Costs", data: [8, 11, 10, 14, 12, 16] },
  ],
};

<Chart type="line" data={data} />
<Chart type="area" data={data} showLegend={false} />

Bar

Multiple datasets render as grouped bars per label.

2024
2025

<Chart
  type="bar"
  data={{
    labels: ["Q1", "Q2", "Q3", "Q4"],
    datasets: [
      { label: "2024", data: [40, 55, 48, 70] },
      { label: "2025", data: [52, 61, 66, 84] },
    ],
  }}
/>

Pie and donut

Radial charts read the first dataset and use one slice per label.

Chrome
Safari
Firefox
Edge

Chrome
Safari
Firefox
Edge

const data = {
  labels: ["Chrome", "Safari", "Firefox", "Edge"],
  datasets: [{ label: "Share", data: [62, 20, 10, 8] }],
};

<Chart type="pie" data={data} width={220} height={220} />
<Chart type="donut" data={data} width={220} height={220} />

API

Chart props

Prop	Type	Default	Description
`type` *	`"line" \| "area" \| "bar" \| "pie" \| "donut"`	—	Chart shape.
`data` *	`{ labels: string[]; datasets: Array<{ label: string; data: number[]; color?: string }> }`	—	Labels plus one or more datasets. Pie/donut read the first dataset.
`width`	`number`	`480`	SVG width in px.
`height`	`number`	`240`	SVG height in px.
`showLegend`	`boolean`	`true`	Renders a legend under the chart.
`showGrid`	`boolean`	`true`	Horizontal gridlines (line/area/bar only).
`strokeWidth`	`number`	`2`	Line thickness for line/area charts.
`aria-label`	`string`	—	Accessible chart summary; auto-generated from the type and dataset labels.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.