Top Charts components Examples with Vue.js
1.Vue d3 charts
Simply yet configurable charts build with D3.
D3 charts for Vue https://saigesp.github.io/vue-d3-charts/
2.Vue d3 examples
Data visualization examples using Vue.js and D3.js. D3.js only examples: https://codepen.io/collection/XEbgoY
3.Vue orgchart
It’s a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.
Features
- For now, just static organization chart
Demo: https://codesandbox.io/dashboard/sandboxes/Vue OrgChart
4.Vue svg charts
Lightweight Vue components for drawing pure svg charts without external dependencies.
Demo: https://sapk.github.io/vue-svg-charts/
5.TradingVue.js
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 TradingView.com in other open-source libraries and can’t stand it - you are definetly in the right place!
Features
- 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
6.Vgauge
A Vue Wrapper to GaugeJS
7.Vue simple flowchart
a lightweight flowchart editor for Vue.js, code with vanillaJS.
Feature
- rag to connent two node, click to delete link
- support add, delete, save node
- reactive flowchart data
8.VueFunnelGraph.js
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
9.Chartjs Web Components
the web components for chartjs. The web components for chart.js which is built on lit-element
Live Demo
https://fsx950223.github.io/chartjs-web-components/live-demo/
10.Vue mermaid
flowchart of mermaid with vue componet.
11.Vue d3 stull charts
vue.js & d3.js implementation of UMF charts https://derekphilipau.github.io/vue-d3-stull-charts/
12.vueOrgChart
Organization chart: A complete solution to generate and publish an orgchart without the need of a webserver and database © Michael Hoogkamer
Demo
Features
- 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
13.Madlab calculator
Coach compensation calculator using Vue and d3
Demo: http://dcenatiempo.com/madlab/calculator/
14.VUE ARC COUNTER
This Vue component generates counter in a circular arc. The angles, colors, strokewidth, spacing between dashes and direction can all be controlled through properties.
15.V-charts
Chart components based on Vue2.x and Echarts
Features
- 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.
Demo: https://v-charts.js.org/
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)
Demo: https://neuronet.io/gantt-elastic/
#vuejs #javascript #vue-js
