Why Unovis
Unovis is an open-source data visualization library built with care for how charts look and how they behave: when you hover them, when the data changes, when the theme switches and when the labels are long. Rather than taking our word for it, this section renders the same data with Unovis and eight of the most popular charting libraries on npm, side by side, with the code for each one.
What sets Unovis apart
Handcrafted
Charts look finished before you configure anything: a balanced palette, smooth monotone curves, rounded bars, uncluttered axes, labels that wrap or trim to the space they have, and a crosshair that snaps to your data. Every change animates, from lines morphing to axes rescaling.
Agentic-ready
Every option is documented in the type definitions with its default, so a coding agent reads the API straight
from the package. The MCP server and @unovis/ssr render charts to SVG or PNG locally, so an agent can look at
what it made.
Themeable
Every color, stroke and font is a CSS variable: theme an app, a chart or a single component without touching chart config, and charts follow your page into dark mode.
Modular
Build charts from components that share one container, one set of scales and one set of axes, and import only what you use. The React, Angular, Vue, Svelte and Solid wrappers are generated from the same TypeScript core, with the same props everywhere.
Lightweight
A full line chart with axes, a legend, a tooltip, a crosshair and animation is about 52 KB gzipped, lighter than most of the libraries compared here.
Beyond the basics
Network graphs with force, Dagre and ELK layouts, Sankey and chord diagrams, Leaflet maps, timelines and treemaps, with the same API and look as the XY charts.
At a glance
| 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 |
|---|---|---|---|---|---|---|---|---|---|
| Rendering | SVG | SVGSource | CanvasSource | Canvas or SVGSource | SVG, Canvas or HTMLSource | CanvasSource | SVGSource | Canvas or SVGSource | SVG or CanvasSource |
| Framework integrations | |||||||||
| Theming | |||||||||
| Dark mode | |||||||||
| Animated data updates | |||||||||
| Resizes with its container | |||||||||
| Server-side rendering to SVG / PNG | |||||||||
| MCP server | |||||||||
| TypeScript |
The feature comparison covers more than 60 features (chart types, AI agent support, building blocks and chart details) with a source for every cell.
Bundle size
The same chart in every library: a line chart with three smooth lines, axes, a legend, a tooltip for all series, a crosshair and animation, written with each library's React integration, minified and gzipped, React itself excluded:
Unovis comes out the smallest, with TanStack Charts and Chart.js close behind. TanStack Charts is lighter with its defaults: straight lines with no crosshair and no animation take 37.5 KB, and with the curves and the crosshair but only data updates animated, 41.3 KB. Observable Plot and Vega-Lite can't animate, and AG Charts Community has neither the crosshair nor animation (both are Enterprise features), so they're measured without them. Hover a bar to see what was bundled, and see how we measured.
When another library might suit you better
We'd rather you pick the right tool than the wrong one:
- Tens of thousands of individual marks. Unovis renders SVG. For a scatter plot with 50,000 points, a Canvas or WebGL renderer such as ECharts, Chart.js or AG Charts will be faster.
- Chart types Unovis doesn't have. There is no built-in candlestick, radar or funnel chart. A gauge can be assembled from the Radial Bar, but it isn't a dedicated component.
- Quick exploratory charts. Observable Plot and Vega-Lite are grammars of graphics with faceting, binning and aggregation built in, so exploring a dataset takes a few lines. Unovis has no faceting or data transforms.
See how we compare for the rules we followed, the versions we tested and why some popular libraries aren't rendered here.
Compare side by side
Each page renders one dataset with Unovis, Recharts, Chart.js, ECharts, Nivo, AG Charts, Observable Plot, Vega-Lite and TanStack Charts. A library that can't draw the chart gets a placeholder that says why. Hover the charts, click the legends, randomize the data, switch the site theme and open the code.
Line Chart
Three series over three years: crosshairs, tooltips, time axes and gaps in the data.
Area Chart
Stacked areas and how they transition when the data or the visible series change.
Grouped Bar Chart
Grouped bars with long category names.
Stacked Bar Chart
Twelve months of stacked bars with a tooltip for the whole stack.
Scatter Plot
Real data from the Palmer penguins dataset, colored and shaped by species and sized by body mass.
Donut Chart
Segments, legends and a total in the middle.
Circular Bar Chart
Progress towards six daily goals, one petal-shaped bar per goal, with icons.
Nested Donut
Website sessions by platform, OS and browser, in rings built from a flat table.
Radial Bar Chart
Usage against five plan quotas as concentric rings, each scaled to its own quota.
Heatmap
API error rates by hour and day of the week, with a monitoring gap.
Treemap
Monthly cloud spend by team and service as nested tiles.
Box Plot
Response times per API endpoint: quartiles, whiskers and outliers.
Timeline
A week of deployments, incidents and maintenance windows across seven services.
Network Graph
A service map with a force layout, icons, alerts and traffic.
Sankey Diagram
Website visitor flows from the traffic source to what visitors did next.
Chord Diagram
Data transfer between six cloud regions, grouped by continent.
Choropleth Map
Users by country, with data centers and the traffic flowing between them.
Tile Map
A month of earthquakes, clustered on a vector tile map.
Brush
A year of daily API requests, zoomed with a brush strip or a zoom box.
Annotations
Callouts for two releases and an outage on a daily-users chart.