TrendChart
A line, or a filled area with area, over a data array: one point per row, xField along the axis and yField up it. The chart fetches nothing, so pass rows you already have, and a row whose yField is not a finite number is a gap in the line. It is an add-on: import it from @chelone/react/charts or @chelone/vue/charts, and install recharts for React or @unovis/vue and @unovis/ts for Vue.
Installation
pnpm dlx shadcn@latest add @chelone/trend-chartA line, or a filled area with area, over a data array: one point per row, xField along the axis and yField up it. The chart fetches nothing, so pass rows you already have, and a row whose yField is not a finite number is a gap in the line. It is an add-on: import it from @chelone/react/charts or @chelone/vue/charts, and install recharts for React or @unovis/vue and @unovis/ts for Vue.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| bare | boolean | — | Leaves out the card and the title. |
| className | string | — | |
| color | string | — | Any CSS color. Defaults to `var(--primary)`. |
| data | readonly TRow[] | — | |
| height | number | — | In pixels. Defaults to 200. |
| loading | boolean | — | |
| title | string | — | |
| xField | TX | — | |
| yField | keyof TRow & string | — | A row whose value is not a finite number draws no point. |
| area | boolean | — | Fills the area under the line with a gradient. |
| smooth | boolean | — | Draws a smooth curve instead of straight segments. |
| tooltipFormatter | (value: number, name: string) => string | — | |
| xTickFormatter | (value: TRow[TX]) => string | — | |
| yTickFormatter | (value: number) => string | — |