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 github:itsvigneshv/default-file-ui#main df-ui add chart
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. |