Explore the collections: React / Next.js · Vue / Nuxt
A dashboard might start with a line chart and a few bars. Then someone asks why a total changed, where volume drops between stages, or whether an average is hiding a wide spread.
Those questions call for different visualizations. They come up whether you build with React, Next.js, Vue, or Nuxt.
We’ve launched 62 chart components across eight families in UIPKGE, available in separate React and Vue collections. Use the React collection for React and Next.js projects, and the Vue collection for Vue and Nuxt projects.
The collection is free and MIT-licensed, and the component source installs into your project so you can adapt it.
Disclosure: I help build UIPKGE.
Choose the chart around the question
A large collection is most useful when it helps you find the right way to explain your data. Here are a few practical starting points:
| Dashboard question | Chart to explore | What it helps show |
|---|---|---|
| Why did this total change? | Waterfall | How positive and negative contributions produce the final total |
| Where does volume go between stages? | Sankey | The size of flows between connected stages |
| Is an average hiding large differences? | Boxplot or histogram | Spread, concentration, and differences between groups |
| How do categories contribute to a hierarchy? | Treemap or sunburst | Parts of a total at multiple levels |
| When do patterns repeat? | Calendar heatmap | Activity across days and longer periods |
| How did each category change between two points? | Dumbbell or slope | Before-and-after comparisons |
The familiar line, bar, area, pie, and scatter charts are there too. A simple chart is often the right choice when it answers the question clearly.
What’s in the collection?
Both catalogs list 62 charts across these eight families:
- Cartesian: 28, including line, bar, waterfall, candlestick, and Gantt charts.
- Circular: 8, including pie, donut, radar, and gauges.
- Hierarchy: 6, including treemap, sunburst, tree, and funnel views.
- Flow and network: 5, including Sankey, alluvial, and network graphs.
- Distribution: 5, including boxplot, violin, and error-bar charts.
- Specialty: 7, including calendar heatmaps, sparklines, and uptime trackers.
- Maps: 2, including choropleth and dotted maps.
- Custom: a raw-chart wrapper for full ECharts options.
Editable source, with a charting engine underneath
UIPKGE follows a shadcn-style registry workflow: components install into your project tree. You can inspect and change their implementation as your requirements evolve.
Most of the collection wraps Apache ECharts. Several simpler visualizations, including progress rings, waffle charts, and uptime trackers, use SVG or markup without an additional charting dependency.
The distinction matters when choosing a component: installing editable source gives you control over the wrapper, while ECharts remains the rendering dependency for the charts built on it.
Connect charts to the surrounding interface
The collection uses theme tokens such as --chart-1 through --chart-5. ECharts wrappers also use foreground and border tokens, providing a starting point for matching the charts to the rest of your UI.
If a supplied component doesn’t cover your use case, the raw-chart wrapper accepts a full ECharts option object. You can work beyond the preset components when you need more control.
Try it with your own data
Start with the collection that matches your stack:
- React and Next.js: browse the React charts.
- Vue and Nuxt: browse the Vue charts.
Choose one chart that answers a real question in your application. Open its component page, follow the setup guidance, and replace the example data. Then check the details your users will encounter: long labels, empty datasets, small screens, and the chart’s rendering in your framework setup.
Which chart type do you regularly need but rarely find in UI component collections?
Top comments (0)