we-do-chart

we-do-chart

A we-do-chart Vue component for plotting time series line chart, with crosshair, zooming and slider features. Compatible with Vue 2.x and at last with Vue 3. Vue 2 is legacy now (according to Vue documentation). Vue 3 version have a lot of enhancements and new features, so it is pretty diffrent from Vue 2 version. And all new versions begging with 1.0.9 will not be supported Vue 2 projects. For using it in Vue 2 feel free and follow vue2 branch of this repo. All below instructions is for Vue 3 projects only.

Fast start up

In vue app just do it.

npm install we-do-chart --save

and in your vue page locally used without component registration ( at my view it most easy way in Vue 3)

<div id="your_page">
	<p>My Chart</p>
	<div style="margin: auto; padding: 1em;">
		<WeDoChart ref="chart" :ds="{width:600,height:400}" :points="rows" theme="berry"/>
	</div>
</div>
<script setup>
import {ref,reactive} from 'vue'
import WeDoChart from "we-do-chart"
const rows = reactive([                                        
	    { name:"Chart1" , data:[             
	        {tm: '2025-08-14', price: 48.61}, 
	        {tm: '2025-08-15', price: 60.61}, 
	        {tm: '2025-08-16', price: 60.91}
	    ]},
    ])                          
</script>

Or use directly In-browser , CDN

<title>Vue3 we-do-chart</title>
  <head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/we-do-chart"></script>
    <link rel="stylesheet" href="https://unpkg.com/we-do-chart/we-do-chart.css">
  </head>
  <body>
   <div id="app">
  		<we-do-chart :ds="{width:300,height:200}" :points="rows" theme="monaco"></we-do-chart>
	</div>
</body>	

 	<script type="text/javascript"> 
		const { createApp,computed } = Vue;
 	 	const ds =[  { name:"Chart1" , data:[             
	        {tm: '2025-08-14', price: 48.61}, 
	        {tm: '2025-08-15', price: 60.61}, 
	        {tm: '2025-08-16', price: 60.91}
	    ]},
    ];
   const vm = {
    	components: {
			'WeDoChart': window["WeDoChart"],
		},
    computed: {
		  rows(){
		      return ds;
		  }
		},
  }
  createApp(vm).mount('#app');
</script>

Elaborate manual

For more info about features, demonstration, customization options please see it here project pages

view demo

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

Contributing

pull requests for Fix bugs, doc errors, new style themes and also new features, suggestions for improvement write me ... welcome.

License

Copyright (c) 2025 Licensed under the MIT license.