Grouped Bar Chart
Annual revenue by region for three years, as grouped bars. The region names are long on purpose.
Pick a preset to reconfigure every chart
What to look for
- Long labels. Unovis wraps "Middle East & Africa" onto two lines within the space of its group. Recharts and ECharts hide labels that don't fit, Chart.js rotates them and Nivo lets them overlap. AG Charts wraps them too. Observable Plot centers each name under its group and lets long ones overlap; Vega-Lite turns them vertical, which takes about a third of the chart's height.
- Hover. The Unovis crosshair shows all three years of a region in one tooltip, wherever you point within the group.
Nivo shows one bar at a time. Observable Plot (
tip: 'x') and Vega-Lite (an extra, invisible layer per region) can show the whole group too. - TanStack Charts. Groups the bars with
layout: group()and shows the whole region in one tooltip (focus: 'group-x'). Its legend hides a year, but the empty slot in each group stays and the y axis keeps its range. - Randomize the data. Bars grow and shrink from their current height. AG Charts Community, Observable Plot and Vega-Lite redraw without a transition.
- Rounded corners. Unovis rounds bar corners by default, which keeps dense bar charts soft on the eye.
- Presets. Horizontal (
orientation) is one every library can draw. Trimmed labels (tickTextFitMode,tickTextWidth) keeps each region name on one line and cuts the middle out of the long one; Recharts, Chart.js and TanStack Charts have no option for it. Patterns (pattern) gives each year a fill pattern in the bars and the legend. ECharts (aria.decal) and AG Charts (fill: { type: 'pattern' }) have patterns built in. Nivo has them too (defs,fill), but only for the bars: its legend keeps plain color squares unless you pass it your owndata. Chart.js takes aCanvasPatternas a fill, which you create yourself from an image or canvas, or make with the Patternomaly package its docs suggest. Recharts and Observable Plot take aurl(#…)fill that points at an SVG<pattern>you write yourself. Vega-Lite and TanStack Charts have no pattern option and document only colors and gradients for a fill.
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 |
|---|---|---|---|---|---|---|---|---|---|
| Grouped bar | |||||||||
| Horizontal bar | |||||||||
| Wrapping / trimming long axis labels | |||||||||
| Rounded bar corners | |||||||||
| Crosshair with a shared tooltip | |||||||||
| Data labels | |||||||||
| Animated data updates | |||||||||
| Dark mode |
Every cell links to its source. See how we compare for the rules we followed.