Chart frame with optional title, description, toolbar, loading and empty states, plus legend and tooltip helpers.
Also known as: chart frame, plot, data chart, legend
Install with the CLI, or copy the component source into your project.
Add chart (npm)
1npx --yes -p @default-file/ui df-ui add chart
ChartFrame wraps a caller supplied plot. Title, description, and plotLabel name the graphic. ChartLegend lists the series below.
Pass actions through toolbar. They align with the title in the header.
loading replaces children with a skeleton at the plot height.
empty shows the kit empty copy. emptyContent replaces that message.
sm, md, and lg set the plot height step. md is the default.
ChartTooltip is a presentational helper. Pass active, label, and payload. formatValue formats each value.
Chart frame, legend, and tooltip helpers for kit plots. Compose ChartFrame around the graphic, then ChartLegend and ChartTooltip as needed.
| Prop | Type | Default | Notes |
|---|---|---|---|
| title | ReactNode | - | Header title above the plot. |
| description | ReactNode | - | Supporting copy under the title. Wired as aria-describedby on the plot when the plot has a name. |
| toolbar | ReactNode | - | Actions aligned with the header. |
| plotLabel | string | - | Accessible name for the plot. Prefer a short summary of the data. When omitted, a string title is used. Provide plotLabel or a string title so the graphic is not unnamed. |
| size | "sm" | "md" | "lg" | "md" | Plot height step. |
| loading | boolean | false | Show the loading placeholder instead of children. |
| empty | boolean | false | Show emptyContent instead of children. |
| emptyContent | ReactNode | - | Content when empty is true. |
| children | ReactNode | - | Plot graphic when not loading or empty. |
| className | string | - | Additional styles on the frame. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| items | readonly ChartLegendItem[] | - | Legend rows. Each item has id, label, and optional color. |
| className | string | - | Additional styles on the list. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| active | boolean | - | Whether the tooltip is shown. |
| label | ReactNode | - | Tooltip heading. |
| payload | readonly ChartTooltipPayloadItem[] | - | Series rows shown in the tooltip body. |
| formatValue | (value, item) => ReactNode | - | Optional formatter for each payload value. |
| className | string | - | Additional styles on the tooltip. |