Chart
The Chart component renders line, bar, area, and pie charts from a single data shape: each row has a label (category or slice name) and one or more numeric series keys. Colours map series or slice names to design-system colour tokens (red, blue, green, and so on).
Import from the framework package and pass type, data, and colors (or rely on automatic colours derived from the first row’s keys).
Sales vs Revenue Trend
new
old
revenue
sales
Loading Code Block...Data and colours
Section titled “Data and colours”data: Array of objects. Each object must includelabel: string. Every other enumerable key should be a number (one or more series for cartesian charts, or typically a single metric key for pie slices).colors: Optional map from series or slice name → token:default,red,orange,blue,green,purple,neutral. If omitted, the implementation assigns colours from the default palette in key order.
Chart types (line, bar, area, pie)
Section titled “Chart types (line, bar, area, pie)”Use type to select the visualisation. Line, bar, and area charts share the bordered card layout with an optional header (title, top legend, filter) and footer (bottom legend, footer copy).
Use the dropdown to switch chart type.
Sales vs Revenue Trend
new
old
revenue
sales
Loading Code Block...Bar variants
Section titled “Bar variants”For type="bar", variant chooses grouped (side-by-side) or stacked bars. Both frameworks honour this prop.
Use the dropdown to switch bar variant.
Sales vs Revenue Trend
new
old
revenue
sales
Loading Code Block...Line and area interpolation
Section titled “Line and area interpolation”For type="line" and type="area", lineType sets interpolation: linear, step, or curved (mapped to Recharts “natural” curves on the React side).
Use the dropdown to switch lineType.
Sales vs Revenue Trend
new
old
revenue
sales
Loading Code Block...Pie chart layout
Section titled “Pie chart layout”Legend arrangement
Section titled “Legend arrangement”For type="pie", arrangement controls how the pie legend is laid out: horizontal or vertical. (This is separate from pieType.)
Use the dropdown to switch arrangement.
Browser Market Share
Loading Code Block...Pie styles (pieType)
Section titled “Pie styles (pieType)”pieType selects default (filled pie), donut, or stacked.
Use the dropdown to switch pieType.
Browser Market Share
Loading Code Block...Donut centre title and subtitle
Section titled “Donut centre title and subtitle”For pieType="donut" (and stacked pie where supported), centerTitle and centerSubtext render text in the centre.
Browser Usage Distribution
Loading Code Block...Header filter (cartesian charts)
Section titled “Header filter (cartesian charts)”A dropdown can appear in the header when you supply filterOptions.
You must pass both filterOptions and onFilterChange. The dropdown does not render if either is missing. Selection state is managed inside the header; use onFilterChange to react to the chosen value (for example to refetch data).
Pass filter-options with at least one option. Bind the selected option with v-model:filter to a ref whose shape matches an element of filter-options (typically initialise it to the first option).
Sales vs Revenue Trend
new
old
revenue
sales
Loading Code Block...Footer
Section titled “Footer”footerTitle and subtext render copy in the footer region when the footer is shown. The footer also appears when legendPosition="bottom" and the legend is enabled, so the legend and footer text can appear together.
Sales vs Revenue Trend
Total revenue
Combined across all regions for the selected period.
new
old
revenue
sales
Loading Code Block...Accessibility
Section titled “Accessibility”- Provide a concise
titleso the chart context is clear in the document outline. - For pie charts,
labelvalues become slice names — use meaningful names, not only codes. - Tooltips are visual; do not rely on them as the only place where critical values appear if you must meet strict textual alternatives (consider a supplementary table for high-stakes data).
Best practices
Section titled “Best practices”React props use camelCase. The header filter is uncontrolled — pass both filterOptions and onFilterChange, and the callback receives the selected option’s value (string | number). Under SSR, Recharts touches window; wrap the chart in a dynamic import (for example Next.js dynamic(() => import("./Chart"), { ssr: false })).
Vue props use kebab-case in templates. The selected filter is two-way bound via v-model:filter and the bound ref receives the full option object ({ label, value }), not just the value. Under SSR Chart.vue short-circuits to v-if="!ssr" and renders nothing — host in <ClientOnly> (Nuxt) or an equivalent client-only wrapper.
| Props | Default | Type | Description |
|---|---|---|---|
| type | React: required in practice. Vue: `'line'` | 'line' | 'bar' | 'area' | 'pie' | Selects the chart implementation. Pie uses a different shell and legend behaviour than cartesian types. |
| data | - | Array<{ label: string; [key: string]: number }> | Required. One object per category or slice; `label` is required. Other keys are numeric series (cartesian) or typically one metric column (pie). |
| colors | Auto from default palette per key order | Record<string, ColorToken> | Maps each series or slice name to a token: `default`, `red`, `orange`, `blue`, `green`, `purple`, `neutral`. |
Legend and header
Section titled “Legend and header”| Props | Default | Type | Description |
|---|---|---|---|
| title | - | string | Heading in the header row when the header is shown. In React the title is rendered inside the pie card; in Vue it is rendered above the pie via the shared `<ChartHeader>`. |
| showLegend | `true` | boolean | Toggles legend visibility. For cartesian charts, the legend is rendered via the shared header/footer; pie charts handle the legend inside the pie implementation. |
| legendPosition | `'top'` | 'top' | 'bottom' | 'left' | 'right' | Where the legend renders relative to the chart. Cartesian charts only wire `top` / `bottom` in both frameworks — `left` / `right` produce no legend. For pie, React applies `flex-row` / `flex-row-reverse` for side placements; Vue ignores side positions and always falls back to `arrangement`. |
| arrangement | `'vertical'` | 'horizontal' | 'vertical' | Pie legend layout. Not used for line/bar/area shared legend strip. `arrangement="vertical"` also caps the pie at `max-w-[400px]` in both frameworks (Vue applies it on the outer shell, React on the inner pie card). |
| filterOptions | React: `undefined`. Vue: `[]` | { label: string; value: string | number }[] | Options for the header dropdown. The `value` field accepts either `string` or `number` in both frameworks. |
| onFilterChange | - | (value: string | number | (string | number)[]) => void | Required alongside `filterOptions` — without it the dropdown does not render. The callback receives the option's `value` (preserving its original `string | number` type). |
| filter | - | React.ReactNode | Replaces the built-in dropdown with arbitrary JSX (forwarded to `<ChartHeader>`). Vue has **no equivalent** today — `<slot name="filter">` is not wired in `Chart.vue` / `ChartHeader.vue` and any slot content is silently dropped. |
| filterPosition | `'right'` | 'left' | 'right' | Aligns the header row: `right` pushes title and filter to opposite ends on wide screens. |
Tooltip
Section titled “Tooltip”| Props | Default | Type | Description |
|---|---|---|---|
| showTooltip | `true` | boolean | Enables hover tooltips. Tooltip DOM, animation, and breakpoints differ between frameworks because React renders via Recharts and Vue renders via ApexCharts. |
Footer
Section titled “Footer”| Props | Default | Type | Description |
|---|---|---|---|
| footerTitle | - | string | Primary line in the footer when the footer region is visible. |
| subtext | - | string | Secondary line in the footer (description or caption). |
Line and area
Section titled “Line and area”| Props | Default | Type | Description |
|---|---|---|---|
| lineType | `'linear'` | 'linear' | 'step' | 'curved' | Line/area interpolation. Ignored for type="bar" and type="pie". React maps `curved` to Recharts' "natural" curve; Vue maps it to ApexCharts' smooth curve. |
| variant | `'grouped'` | 'grouped' | 'stacked' | For type="bar": grouped (side-by-side) vs stacked bars (Recharts `stackId="a"` in React, ApexCharts `stacked: true` in Vue). For type="area" the prop is a no-op in both frameworks: React's `AreaChart` does not accept `variant`, and Vue's `AreaLineChart` ignores the `stacked` prop forwarded from `Chart.vue`. Ignored entirely for type="line" and type="pie". |
Pie only
Section titled “Pie only”| Props | Default | Type | Description |
|---|---|---|---|
| pieType | `'default'` | 'default' | 'donut' | 'stacked' | Pie geometry style. Both frameworks render the same visual pattern: filled pie / donut with centre text / stacked secondary pie. |
| centerTitle | - | string | Centre label for donut (and the React stacked-pie secondary branch). Rendered only when `pieType === 'donut'`. |
| centerSubtext | - | string | Secondary centre line, often a total or subtitle. |