Top Charts components Examples with Vue.js

1.Vue d3 charts

Simply yet configurable charts build with D3.

Vue d3 charts

D3 charts for Vue

View on Github

2.Vue d3 examples

Data visualization examples using Vue.js and D3.js. D3.js only examples:

Vue d3 examples

View on Github

3.Vue orgchart

It’s a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.
Vue orgchart


  • For now, just static organization chart

Demo: OrgChart

View on Github

4.Vue svg charts

Lightweight Vue components for drawing pure svg charts without external dependencies.
Vue svg charts


View on Github


TradingVue.js is a hackable charting lib for traders. You can draw literally ANYTHING on top of candlestick charts.

If you create trading software - this lib is probably for you. If you like to make custom indicators and think out of the box - this lib is most likely for you. And if you miss usability of in other open-source libraries and can’t stand it - you are definetly in the right place!



  • Scrolling & zooming as we all like
  • Simple API for making new overlays
  • No need for fancy math
  • One overlay === one .vue component
  • Fully reactive
  • Fully responsive
  • Customizable colors and fonts

View on Github


A Vue Wrapper to GaugeJS


Live Demo

View on Github

7.Vue simple flowchart

a lightweight flowchart editor for Vue.js, code with vanillaJS.

Vue simple flowchart


  • rag to connent two node, click to delete link
  • support add, delete, save node
  • reactive flowchart data

View on Github


Vue.js component drawing SVG Funnel Graphs

Funnel graph drawing library for Vue.js.

  • SVG charts
  • Values, Labels, Percentages display
  • Two-dimensional graph support
  • Legend display
  • Detailed percentage breakdown on hover
  • Animated
  • Solid color and gradient fill
  • Horizontal and vertical charts

Online Demo
CodePen Demo

View on Github

9.Chartjs Web Components

the web components for chartjs. The web components for chart.js which is built on lit-element
Chartjs Web Components

Live Demo

View on Github

10.Vue mermaid

flowchart of mermaid with vue componet.
Vue mermaid

View on Github

11.Vue d3 stull charts

vue.js & d3.js implementation of UMF charts

Vue d3 stull charts

View on Github


Organization chart: A complete solution to generate and publish an orgchart without the need of a webserver and database © Michael Hoogkamer



  • Just runs everywhere, no install, no webserver, no database needed!
  • Edit in excel (bulk updates, external source)
  • Edit in the webpage
  • Supports 1000’s of departments
  • Panzoom and interactive expansion of subdepartments
  • Deeplinks to departments
  • Save as image
  • Search for departments and managers
  • Add employees to departments
  • Use photo’s from api (not included), or local folder
  • Click on employee to link to api (not included) or local folder

View on Github

13.Madlab calculator

Coach compensation calculator using Vue and d3

Madlab calculator


View on Github


This Vue component generates counter in a circular arc. The angles, colors, strokewidth, spacing between dashes and direction can all be controlled through properties.


Sample code on codesandbox

Browser example on Codepen

View on Github


Chart components based on Vue2.x and Echarts



  • Uniform data format: Use an uniform data format that both convient for frontend and backend, and also easy to create and edit.
  • Simplified configuration: With simplified configuration items, complex requirements can be easily implemented.
  • Simple customization: Provide a variety of custom Echarts way, you can easily set the chart options.


View on Github

16.Elastic javascript Gantt Chart.

Gantt Chart [ javascript gantt chart, gantt component, vue gantt, vue gantt chart, responsive gantt, project manager , vue projects ]

Gantt-elastic is a vue component but it could be used in other frameworks or even with jQuery (vue is kind of elastic and lightweight framework).

Gantt-elastic is not fully finished yet and may change (but if you really wan’t you can fork this repo or download current version - do not use npm right now)
Elastic javascript Gantt Chart


View on Github

#vuejs #javascript #vue-js

Top Charts components Examples with Vue.js
66.20 GEEK