we-do-chart

A we-do-chart Vue component. Compatible with Vue 2.x For more info about features, demonstration , customization options see the project pages

Project setup

In vue app just do it.( if project has no vue.js just add it to the dependencies before next step )

npm install we-do-chart --save

and in your page add it to the components in vue instance

import WeDoChart from "we-do-chart";
import "we-do-chart/we-do-chart.min.css";
<script>
export default {
	name: "Your vue page",
	components: {
		'we-do-chart':WeDoChart
	},
	data: () => ({
		chartdata: [  {name:'Chart Name',data:[...] }, ]
	})
   
};
</script>

Or use directly from a CDN

<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="https://unpkg.com/we-do-chart/we-do-chart.min.css">
<script src="https://unpkg.com/we-do-chart"></script>

<div id="your_page">
	<p>My Chart</p>
	<div style="margin: auto; width: 700px;height: 300px;">
		<we-do-chart :points="chartdata"></we-do-chart>
	</div>
</div>
<script>
	new Vue({
		el: '#your_page',
		components: {
		  	'we-do-chart':WeDoChart
		},
		data: () => ({
			chartdata: [  {name:'Chart Name',data:[...] }, ]
		}),
		
	})
</script>

try it

Go we-do-chart by Aleksey Bazhenov (@dhruuva) on CodePen.