BarChart
One bar per row of a data array, 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: no bar is drawn for it. Each bar draws in the next theme chart color, cycled over the bars; pass color to draw every bar in one color. 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/bar-chartOne bar per row of a data array, 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: no bar is drawn for it. Each bar draws in the next theme chart color, cycled over the bars; pass color to draw every bar in one color. 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. Left out, each bar draws in the next theme chart color. |
| colors | readonly string[] | — | Any CSS colors, cycled over the bars when `color` is left out. Defaults to the theme's chart colors. |
| 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. |