Stacked Bar Chart
Support tickets opened each month in 2025, stacked by priority, with a tooltip for the whole stack.
Pick a preset to reconfigure every chart
What to look for
- Hover. The Unovis crosshair marks the top of every segment in the month and lists them all in one tooltip.
Observable Plot and Vega-Lite list the whole stack too: Plot with a
Plot.tipper month, Vega-Lite with a pivot transform and a hover rule. TanStack Charts lists the stack too and shades the hovered month. - Hide a priority. The remaining segments restack with a transition, and the y axis follows. Observable Plot does it with a few lines of state and no transition; Vega-Lite's legend highlights a priority instead of hiding it. TanStack Charts' legend hides a priority without restacking, so the segments above it float and the axis keeps its range.
- Stack order. Vega-Lite stacks segments by the color field's name unless you add an
orderchannel, which the demo does to keep Low at the bottom. - Negative values. Unovis stacks negative values below zero automatically, which makes diverging stacked bars a
one-liner. Recharts needs
stackOffset="sign"for that, otherwise negative segments overlap. - Randomize the data. Watch the segments move together. AG Charts Community, Observable Plot and Vega-Lite redraw without a transition.
- Presets. Horizontal (
orientation) is one every library can draw, though Nivo lists the months bottom-up and the Unovis crosshair only follows the x axis, so its tooltip moves to the bars. Patterns (pattern) gives each priority a fill pattern, which only ECharts (decals), Nivo and AG Charts have built in. Recharts and Observable Plot can point a bar'sfillat an SVG<pattern>you write yourself, Chart.js takes aCanvasPatternthat you draw yourself or get from the third-party Patternomaly library, and TanStack Charts and Vega-Lite have no pattern fills. Capacity line (VisPlotline) takes the official chartjs-plugin-annotation package in Chart.js, and ECharts draws it as amarkLine, which has to belong to a series, so the demo puts it on Low.
Feature comparison
| Feature | Unovis1.8.0 | Recharts3.10.1 | Chart.js4.5.1 | ECharts6.1.0 | Nivo0.99.0 | AG Charts14.2.0 | Observable Plot0.6.17 | Vega-Lite6.5.0 | TanStack Charts1.1.0 |
|---|---|---|---|---|---|---|---|---|---|
| Stacked bar | |||||||||
| Stacking negative values | |||||||||
| Horizontal bar | |||||||||
| Wrapping / trimming long axis labels | |||||||||
| Crosshair with a shared tooltip | |||||||||
| Animated data updates | |||||||||
| Dark mode | |||||||||
| Waterfall |
Every cell links to its source. See how we compare for the rules we followed.