[{"data":1,"prerenderedAt":36},["ShallowReactive",2],{"4583333":3},{"type_of":4,"id":5,"title":6,"description":7,"readable_publish_date":8,"slug":9,"path":10,"url":11,"comments_count":12,"public_reactions_count":12,"collection_id":13,"published_timestamp":14,"language":15,"subforem_id":16,"ai_disclosure_level":17,"ai_disclosure_label":18,"positive_reactions_count":12,"cover_image":13,"social_image":19,"canonical_url":11,"created_at":20,"edited_at":13,"crossposted_at":13,"published_at":14,"last_comment_at":14,"reading_time_minutes":21,"tag_list":22,"tags":23,"body_html":28,"body_markdown":29,"user":30},"article",4583333,"62 free, open-source charts for React, Vue, Next.js, and Nuxt","Explore the collections: React / Next.js · Vue / Nuxt  A dashboard might start with a line chart...","Sep 5","62-free-open-source-charts-for-react-vue-nextjs-and-nuxt-55ml","/suren_/62-free-open-source-charts-for-react-vue-nextjs-and-nuxt-55ml","https://dev.to/suren_/62-free-open-source-charts-for-react-vue-nextjs-and-nuxt-55ml",0,null,"2026-09-05T16:39:30Z","en",1,"not_disclosed","Not Disclosed","https://media2.dev.to/dynamic/image/width=1200,height=627,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F1hinsze7jrdava8tq2fl.png","2026-09-05T16:23:02Z",3,"react, vue, nextjs, nuxt",[24,25,26,27],"react","vue","nextjs","nuxt","\u003Cp>\u003Ca href=\"https://uipkge.dev/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cimg src=\"https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fez7n92vjdx8t069rfxvn.png\" alt=\"UIPKGE chart gallery showing area, bar, candlestick, and other dashboard charts\" loading=\"lazy\" width=\"800\" height=\"418\">\u003C/a>\u003C/p>\n\n\u003Cp>\u003Cstrong>Explore the collections: \u003Ca href=\"https://uipkge.dev/react/charts/\" target=\"_blank\" rel=\"noopener noreferrer\">React / Next.js\u003C/a> · \u003Ca href=\"https://uipkge.dev/vue/charts/\" target=\"_blank\" rel=\"noopener noreferrer\">Vue / Nuxt\u003C/a>\u003C/strong>\u003C/p>\n\n\u003Cp>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.\u003C/p>\n\n\u003Cp>Those questions call for different visualizations. They come up whether you build with React, Next.js, Vue, or Nuxt.\u003C/p>\n\n\u003Cp>We’ve launched \u003Cstrong>62 chart components across eight families in UIPKGE\u003C/strong>, available in separate \u003Cstrong>React and Vue collections\u003C/strong>. Use the React collection for React and Next.js projects, and the Vue collection for Vue and Nuxt projects.\u003C/p>\n\n\u003Cp>The collection is \u003Cstrong>free and MIT-licensed\u003C/strong>, and the component source installs into your project so you can adapt it.\u003C/p>\n\n\u003Cp>\u003Cem>Disclosure: I help build UIPKGE.\u003C/em>\u003C/p>\n\n\u003Ch2>\n  \u003Ca name=\"choose-the-chart-around-the-question\" href=\"#choose-the-chart-around-the-question\">\n  \u003C/a>\n  Choose the chart around the question\n\u003C/h2>\n\n\u003Cp>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:\u003C/p>\n\n\u003Cdiv class=\"table-wrapper-paragraph\">\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Dashboard question\u003C/th>\n\u003Cth>Chart to explore\u003C/th>\n\u003Cth>What it helps show\u003C/th>\n\u003C/tr>\n\u003C/thead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>Why did this total change?\u003C/td>\n\u003Ctd>Waterfall\u003C/td>\n\u003Ctd>How positive and negative contributions produce the final total\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>Where does volume go between stages?\u003C/td>\n\u003Ctd>Sankey\u003C/td>\n\u003Ctd>The size of flows between connected stages\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>Is an average hiding large differences?\u003C/td>\n\u003Ctd>Boxplot or histogram\u003C/td>\n\u003Ctd>Spread, concentration, and differences between groups\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>How do categories contribute to a hierarchy?\u003C/td>\n\u003Ctd>Treemap or sunburst\u003C/td>\n\u003Ctd>Parts of a total at multiple levels\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>When do patterns repeat?\u003C/td>\n\u003Ctd>Calendar heatmap\u003C/td>\n\u003Ctd>Activity across days and longer periods\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>How did each category change between two points?\u003C/td>\n\u003Ctd>Dumbbell or slope\u003C/td>\n\u003Ctd>Before-and-after comparisons\u003C/td>\n\u003C/tr>\n\u003C/tbody>\n\u003C/table>\u003C/div>\n\n\u003Cp>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.\u003C/p>\n\n\u003Ch2>\n  \u003Ca name=\"whats-in-the-collection\" href=\"#whats-in-the-collection\">\n  \u003C/a>\n  What’s in the collection?\n\u003C/h2>\n\n\u003Cp>Both catalogs list 62 charts across these eight families:\u003C/p>\n\n\u003Cul>\n\u003Cli>\n\u003Cstrong>Cartesian:\u003C/strong> 28, including line, bar, waterfall, candlestick, and Gantt charts.\u003C/li>\n\u003Cli>\n\u003Cstrong>Circular:\u003C/strong> 8, including pie, donut, radar, and gauges.\u003C/li>\n\u003Cli>\n\u003Cstrong>Hierarchy:\u003C/strong> 6, including treemap, sunburst, tree, and funnel views.\u003C/li>\n\u003Cli>\n\u003Cstrong>Flow and network:\u003C/strong> 5, including Sankey, alluvial, and network graphs.\u003C/li>\n\u003Cli>\n\u003Cstrong>Distribution:\u003C/strong> 5, including boxplot, violin, and error-bar charts.\u003C/li>\n\u003Cli>\n\u003Cstrong>Specialty:\u003C/strong> 7, including calendar heatmaps, sparklines, and uptime trackers.\u003C/li>\n\u003Cli>\n\u003Cstrong>Maps:\u003C/strong> 2, including choropleth and dotted maps.\u003C/li>\n\u003Cli>\n\u003Cstrong>Custom:\u003C/strong> a raw-chart wrapper for full ECharts options.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>\n  \u003Ca name=\"editable-source-with-a-charting-engine-underneath\" href=\"#editable-source-with-a-charting-engine-underneath\">\n  \u003C/a>\n  Editable source, with a charting engine underneath\n\u003C/h2>\n\n\u003Cp>UIPKGE follows a shadcn-style registry workflow: components install into your project tree. You can inspect and change their implementation as your requirements evolve.\u003C/p>\n\n\u003Cp>Most of the collection wraps \u003Cstrong>Apache ECharts\u003C/strong>. Several simpler visualizations, including progress rings, waffle charts, and uptime trackers, use SVG or markup without an additional charting dependency.\u003C/p>\n\n\u003Cp>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.\u003C/p>\n\n\u003Ch2>\n  \u003Ca name=\"connect-charts-to-the-surrounding-interface\" href=\"#connect-charts-to-the-surrounding-interface\">\n  \u003C/a>\n  Connect charts to the surrounding interface\n\u003C/h2>\n\n\u003Cp>The collection uses theme tokens such as \u003Ccode>--chart-1\u003C/code> through \u003Ccode>--chart-5\u003C/code>. ECharts wrappers also use foreground and border tokens, providing a starting point for matching the charts to the rest of your UI.\u003C/p>\n\n\u003Cp>If a supplied component doesn’t cover your use case, the \u003Cstrong>raw-chart\u003C/strong> wrapper accepts a full ECharts option object. You can work beyond the preset components when you need more control.\u003C/p>\n\n\u003Ch2>\n  \u003Ca name=\"try-it-with-your-own-data\" href=\"#try-it-with-your-own-data\">\n  \u003C/a>\n  Try it with your own data\n\u003C/h2>\n\n\u003Cp>Start with the collection that matches your stack:\u003C/p>\n\n\u003Cul>\n\u003Cli>\n\u003Cstrong>React and Next.js:\u003C/strong> \u003Ca href=\"https://uipkge.dev/react/charts/\" target=\"_blank\" rel=\"noopener noreferrer\">browse the React charts\u003C/a>.\u003C/li>\n\u003Cli>\n\u003Cstrong>Vue and Nuxt:\u003C/strong> \u003Ca href=\"https://uipkge.dev/vue/charts/\" target=\"_blank\" rel=\"noopener noreferrer\">browse the Vue charts\u003C/a>.\u003C/li>\n\u003C/ul>\n\n\u003Cp>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.\u003C/p>\n\n\u003Cp>Which chart type do you regularly need but rarely find in UI component collections?\u003C/p>\n\n","[![UIPKGE chart gallery showing area, bar, candlestick, and other dashboard charts](https://dev-to-uploads.s3.us-east-2.amazonaws.com/uploads/articles/141kqb5s41zrtav02mox.png)](https://uipkge.dev/)\n\n**Explore the collections: [React / Next.js](https://uipkge.dev/react/charts/) · [Vue / Nuxt](https://uipkge.dev/vue/charts/)**\n\nA 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.\n\nThose questions call for different visualizations. They come up whether you build with React, Next.js, Vue, or Nuxt.\n\nWe’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.\n\nThe collection is **free and MIT-licensed**, and the component source installs into your project so you can adapt it.\n\n*Disclosure: I help build UIPKGE.*\n\n## Choose the chart around the question\n\nA large collection is most useful when it helps you find the right way to explain your data. Here are a few practical starting points:\n\n| Dashboard question | Chart to explore | What it helps show |\n| --- | --- | --- |\n| Why did this total change? | Waterfall | How positive and negative contributions produce the final total |\n| Where does volume go between stages? | Sankey | The size of flows between connected stages |\n| Is an average hiding large differences? | Boxplot or histogram | Spread, concentration, and differences between groups |\n| How do categories contribute to a hierarchy? | Treemap or sunburst | Parts of a total at multiple levels |\n| When do patterns repeat? | Calendar heatmap | Activity across days and longer periods |\n| How did each category change between two points? | Dumbbell or slope | Before-and-after comparisons |\n\nThe 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.\n\n## What’s in the collection?\n\nBoth catalogs list 62 charts across these eight families:\n\n- **Cartesian:** 28, including line, bar, waterfall, candlestick, and Gantt charts.\n- **Circular:** 8, including pie, donut, radar, and gauges.\n- **Hierarchy:** 6, including treemap, sunburst, tree, and funnel views.\n- **Flow and network:** 5, including Sankey, alluvial, and network graphs.\n- **Distribution:** 5, including boxplot, violin, and error-bar charts.\n- **Specialty:** 7, including calendar heatmaps, sparklines, and uptime trackers.\n- **Maps:** 2, including choropleth and dotted maps.\n- **Custom:** a raw-chart wrapper for full ECharts options.\n\n## Editable source, with a charting engine underneath\n\nUIPKGE follows a shadcn-style registry workflow: components install into your project tree. You can inspect and change their implementation as your requirements evolve.\n\nMost 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.\n\nThe 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.\n\n## Connect charts to the surrounding interface\n\nThe 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.\n\nIf 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.\n\n## Try it with your own data\n\nStart with the collection that matches your stack:\n\n- **React and Next.js:** [browse the React charts](https://uipkge.dev/react/charts/).\n- **Vue and Nuxt:** [browse the Vue charts](https://uipkge.dev/vue/charts/).\n\nChoose 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.\n\nWhich chart type do you regularly need but rarely find in UI component collections?",{"name":31,"username":31,"twitter_username":13,"github_username":32,"user_id":33,"website_url":13,"profile_image":34,"profile_image_90":35},"suren_","uday-a",542873,"https://media2.dev.to/dynamic/image/width=640,height=640,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F542873%2F59b49c04-8aed-4522-bda0-8796f985821f.png","https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F542873%2F59b49c04-8aed-4522-bda0-8796f985821f.png",1788921586547]