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.
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><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>For more info about features, demonstration, customization options please see it here project pages
Go we-do-chart by Aleksey Bazhenov (@dhruuva) on CodePen.
pull requests for Fix bugs, doc errors, new style themes and also new features, suggestions for improvement write me ... welcome.
Copyright (c) 2025 Licensed under the MIT license.