Studios

Chart Studio

Draw your own data through a real chart and take the code away. The preview and the snippet are built from the same state, so what you see is what you copy.

Build

Family

Unit

Height

Your data

The value axis is formatted from the unit you declared. A chart renders what it is given and never converts a unit.

const rows = [
  { time: "2024-01", value: 41.2 },
  { time: "2024-02", value: 43.8 },
  { time: "2024-03", value: 42.1 },
  { time: "2024-04", value: 46.4 },
  { time: "2024-05", value: 45.9 },
  { time: "2024-06", value: 49.3 },
  { time: "2024-07", value: 52.7 },
  { time: "2024-08", value: 51.4 },
  { time: "2024-09", value: 55.1 },
  { time: "2024-10", value: 58.6 },
  { time: "2024-11", value: 57.2 },
  { time: "2024-12", value: 61.9 },
];

import { LineChart } from "@luc/ui/charts";

<LineChart
  data={rows}
  xKey="time"
  series={[{ key: "value", label: "Monthly close", type: "line", tone: "accent", lineWidth: 2 }]}
  axes={[{ id: "primary", format: { kind: "number" } }]}
  height={320}
  ariaLabel="Monthly close"
/>