we-do-chart
v1.0.24
Published
Nice looking and easy customize vue component for plot line-chart.Slider & resizing present.Truly responsive. Slide,resize,zoom,shapes are present
Maintainers
albazhenovReadme
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 --saveand 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.