Components

Panel chart

The chart a generated surface is allowed to ask for: one serializable { type, series } object in, one finished line or bar chart out. Ramp colours, grid, tooltip and legend are fixed. Line or bar is the only choice the data gets to make.

Install

npx shadcn@latest add @alix/panelChart

Preview

Usage

<PanelChart
  panel={{
    type: "line",
    series: [
      { name: "Utilisation", points: [{ label: "Q1", value: 71 }, { label: "Q2", value: 78 }] },
      { name: "Target", points: [{ label: "Q1", value: 75 }, { label: "Q2", value: 75 }] },
    ],
  }}
/>

Examples

In a Panel

The intended composition: the Panel owns the title and unit; the chart owns nothing but the series. This is how pack dashboards and report exhibits paint their figures.

Cash released

£m

<Panel title="Cash released" description="£m">
  <PanelChart
    panel={{
      type: "bar",
      series: [{ name: "Cash released (£m)", points: [{ label: "Jan", value: 1.2 }, { label: "Feb", value: 2.1 }] }],
    }}
  />
</Panel>

When to use it

Use it for

Chart data that lives as JSON (generated packs, CMS entries, stored fact bases) where the data must not be able to misconfigure the chart.
Inside a Panel on a dashboard, or inside an exhibit frame in a report.
Up to three series; the brand ramp (primary, steel, gold) is positional and capped on purpose.

Reach for something else

Hand-composed charts that need their own axes, domains, or formatting. Use LineChart, Waterfall, or raw recharts.
A tiny in-cell trend. Use Sparkline.
A single number. Use Stat or StatCard.

Props

Prop	Type	Default	Description
panel	PanelChartData	–	The whole contract: { type: "line" \| "bar", series: { name, points: { label, value }[] }[] }. Rows are aligned by the first series' labels. Values arrive pre-scaled; the chart never computes.