Back to Chart
View full API on Chart
Chart
Stacked bar chart
A vertical stacked composition with grouped datasets, formatted tooltips, and a legend.
API
| Prop | Type | Default | Description |
|---|---|---|---|
| type* | "line" | "bar" | "radar" | "donut" | "pie" | "polarArea" | "bubble" | "scatter" | — | Chart controller used to render the supplied data. |
| data* | ChartData | — | Chart.js-inspired labels and datasets configuration. |
| options | ChartOptions | ChartRadialOptions | {} | Typed subset for responsive sizing, axes, legends, tooltips, titles, styling, and animation. |
| height | number | string | — | Explicit chart height. Without it, the wrapper keeps a readable minimum height and responsive aspect ratio. |
| showDataTable | boolean | false | Renders a visually hidden accessible table containing the chart data. |
| fallback | React.ReactNode | — | Content shown when the chart has no usable data. |
| className | string | — | Merged onto the responsive chart wrapper. |
| ChartDataset.data* | (number | null | { x: number; y: number; r?: number })[] | — | Numeric values for line/bar/radial charts or coordinate points for scatter/bubble charts. |
| ChartDataset.type / stack | "bar" | "line" / string | — | Optional Cartesian dataset controller and stack group. Use dataset types together for mixed bar-line charts. |
| ChartDataset.backgroundColor / borderColor | string | string[] | — | Single or per-point colors; defaults to the kit palette and theme tokens. Pie and donut charts are intentionally borderless. |
| ChartDataset.fill / tension / pointRadius / showLine | boolean | number | — | Line and point rendering controls used by line, radar, scatter, and bubble charts. |
| options.plugins.legend / tooltip / title | ChartLegendOptions | ChartTooltipOptions | ChartTitleOptions | — | Controls chart chrome, hover feedback, titles, and clickable dataset visibility. |
| ChartTitleOptions.align | "start" | "center" | "end" | start | Aligns the chart title to the start, center, or end of the chart. String titles stay on one row; pass an array to provide explicit title rows. |
| ChartTitleOptions.fontSize | number | 15 | Sets the chart title's rendered size in pixels and is normalized across radial and Cartesian chart viewports. The default is 15; use a string for a single-row title or an array for explicit multiline content. |
| options.plugins.threeD | ChartThreeDOptions (pie/donut only) | — | Opt-in oblique SVG pie/donut projection with a 28-unit default depth, complete colored outer, inner, and radial sidewalls, an elliptical top face, perspective, and labels. |
| options.scales.x / y / r | ChartScaleOptions | — | Axis visibility, bounds, grid, tick formatting, titles, and stacking. |
| options.scales.*.ticks | ChartTicksOptions | — | Tick formatting with automatic dense-label skipping, tick limits, and optional rotation controls. |
| options.animation | false | ChartAnimation | { duration: 900, easing: 'easeOutQuart' } | Mount/update animation settings with an optional completion callback. |
| options.transitions.show / hide | false | ChartAnimation | { duration: 450, easing: 'easeOutQuart' } | Overrides the legend dataset show/hide transition; rapid toggles reverse from the current geometry. |
| options.transitions.hover | false | ChartAnimation | { duration: 180, easing: 'easeOutCubic' } | Overrides animated pie, donut, and polar-area sector hover expansion. The transition respects reduced-motion preferences and does not enable 3D on polar-area charts. |
| options.responsive / maintainAspectRatio / aspectRatio / indexAxis | boolean | number | 'x' | 'y' | — | Responsive sizing, aspect-ratio behavior, and horizontal Cartesian layout. |