Area Chart
Monthly cloud spend by service over two years, as a stacked area chart with a shared tooltip and a legend that toggles services.
Pick a preset to reconfigure every chart
What to look for
- Stacking. In Unovis, passing several
yaccessors to an Area stacks them. Chart.js needs the Filler plugin and a fill target on every dataset, and its stacked y axis doesn't start at zero unless you setbeginAtZero. - Hide a service. The Unovis areas above it slide down while the axis rescales, in one transition.
- Randomize the data. Watch the stacks morph. AG Charts Community has no animations; they're an Enterprise feature.
- Blending. Nivo draws each area from the baseline at 20% opacity by default, so the colors mix where they overlap.
- Observable Plot and Vega-Lite. Both stack areas on their own once the data has one row per month and service. Plot's legend is static, so hiding a service takes a few lines of state; Vega-Lite's legend highlights a service instead of hiding it and stacks the first legend item on top. Neither animates updates.
- TanStack Charts. Stacks the areas on its own, animates updates (
svgAnimation) and has a clickable legend, but hiding a service removes its layer without restacking, so a gap is left and the y axis keeps its range. - Presets. Step areas switches
curveType, which every library can match. Patterns gives each service a built-in fill pattern through thepatternaccessor; ECharts (decals), Nivo and AG Charts have built-in patterns too, while TanStack Charts, Recharts, Chart.js, Observable Plot and Vega-Lite don't. Annotations adds aVisPlotbandand aVisPlotline: Chart.js draws both with the official chartjs-plugin-annotation, and Nivo has no band. TanStack'srecthas no plot-spanning mode, so the demo gives the band both y ends: zero and the top of TanStack's inferred y domain. - Stream graphs. The Unovis
baselineaccessor sets a baseline for every data point, which is all a stream graph needs. See the Area with Baseline example.
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 area | |||||||||
| Stream graph | |||||||||
| Custom area baseline | |||||||||
| Crosshair with a shared tooltip | |||||||||
| Animated data updates | |||||||||
| Dark mode | |||||||||
| Curve types | |||||||||
| Reference bands |
Every cell links to its source. See how we compare for the rules we followed.