Chart
Universal chart container with sizing, loading states, and child composition.
<Chart> is the single wrapper for all chart types — cartesian (line, bar, area) and geographic (choropleth, boundary, point data). It handles responsive sizing, loading states, and child categorisation.
Cartesian mode
Pass data and xDataKey for cartesian charts with scales, axes, and cursor interaction:
import { Chart, LineMark, XAxis, YAxis, Legend, Tooltip } from "@exhibit/charts";
<Chart data={data} xDataKey="month" height={400}>
<XAxis />
<YAxis />
<LineMark dataKey="value" name="Revenue" color="#3b82f6" />
<Legend />
<Tooltip />
</Chart>Shell mode (geo charts)
Omit data and xDataKey for geographic charts. Chart provides the container, SVG, and child slots — geo children (<Choropleth>, <Boundary>, <PointLayer>) register their own context:
import { Chart, Choropleth, Legend, Tooltip } from "@exhibit/charts";
<Chart height={620} loading={loading}>
<Choropleth geoData={geo} data={popData}
featureIdKey="LAD24CD" featureNameKey="LAD24NM"
/>
<Legend formatValue={(v) => v.toLocaleString()} />
<Tooltip valueLabel="Population" />
</Chart>Loading states
The loading prop has three modes:
| Value | Behaviour |
|---|---|
undefined (default) | Auto — shows skeleton until the chart is ready (width measured + data/scales available) |
true | Forced — always show the loading skeleton (e.g. during data fetch) |
false | Suppressed — never show skeleton, even if data is empty |
Child composition
Chart categorises its children by static tags:
| Tag | Position | Examples |
|---|---|---|
No __chartHtml | Inside SVG | <LineMark>, <BarMark>, <Grid>, <Choropleth>, <Boundary>, <PointLayer> |
__chartHtml + "top" | Above SVG | <ChoroplethBreadcrumb> |
__chartHtml + "overlay" | Absolute over SVG | <Tooltip>, <Cursor> |
__chartHtml + "bottom" | Below SVG | <Legend> |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | T[] | — | Tabular data array (omit for geo/shell mode) |
xDataKey | string | — | X-axis data key (omit for geo/shell mode) |
height | number | 400 | Chart height in px |
loading | boolean | — | Loading state (see above) |
padding | Partial<Padding> | { top: 20, right: 20, bottom: 40, left: 48 } | Plot area padding (cartesian only) |
animate | boolean | true | Enable/disable animations |
activeIndex | number | null | — | Controlled hover index (cartesian) |
onActiveIndexChange | (index: number | null) => void | — | Controlled hover callback |
skeleton | ReactNode | — | Custom loading skeleton |
className | string | — | CSS class for the outer container |