62 free, open-source chart components for React, Next.js, Vue, and Nuxt

A dashboard often begins with lines and bars but quickly needs more specialized views when users ask why totals changed, where volume flows, or whether an average hides a wide spread. UIPKGE publishes 62 chart components split into React (for React and Next.js) and Vue (for Vue and Nuxt) collections to make those visualizations easy to add and adapt.

The catalog groups the 62 charts into eight families and lists counts for each:

• Cartesian (28): line, bar, waterfall, candlestick, Gantt, and related Cartesian charts.
• Circular (8): pie, donut, radar, gauges.
• Hierarchy (6): treemap, sunburst, tree, funnel.
• Flow and network (5): Sankey, alluvial, network graphs.
• Distribution (5): boxplot, violin, error-bar charts.
• Specialty (7): calendar heatmaps, sparklines, uptime trackers, progress rings, waffle charts.
• Maps (2): choropleth and dotted maps.
• Custom: a raw-chart wrapper that accepts a full ECharts options object.

All components in the collections are free and MIT-licensed. Components install into your project tree, following a shadcn-style registry workflow. That means the wrapper and component source are editable inside your codebase, letting you change implementation details as requirements evolve.

Most charts are wrappers around Apache ECharts. Several simpler visualizations—progress rings, waffle charts, uptime trackers—use SVG or plain markup without adding ECharts. The choice matters: if you need to tweak rendering internals you can edit the wrapper, but charts built on ECharts still depend on ECharts for drawing. If you need full ECharts control, use the raw-chart wrapper and pass a complete option object. Styling and integrating with your UI The collection uses theme tokens such as --chart-1 through --chart-5 and includes foreground and border tokens for ECharts wrappers. These tokens give you a starting point for matching chart colors and text to your existing UI system.

1. 1Pick the collection for your stack (React for React/Next.js, Vue for Vue/Nuxt).

1. 1Open the component page and follow setup instructions. Replace example data with your own.
2. 2Test with realistic edge cases: long labels, empty datasets, small screens, and the chart's rendering within your framework setup.

When to edit wrappers vs. use raw options

• Edit the installed component source when you need to change how the wrapper integrates with your app (props, annotations, or small behavior tweaks).
• Use the raw-chart wrapper and supply full ECharts options when presets don't cover your visualization needs and you want explicit ECharts features or plugins.

Practical checklist before shipping

• Confirm accessibility and keyboard interactions where expected.
• Verify color contrast and theme token mapping for your brand.
• Check responsiveness and performance with realistic dataset sizes.
• Validate label truncation, tooltips, and empty-state behavior.

Use the React collection for React and Next.js projects and the Vue collection for Vue and Nuxt projects. Each component page includes setup guidance and example data to replace with your own.