we-do-chart
Version:
Nice looking and easy customize vue component for plot line-chart.Slider & resizing present.Truly responsive. Slide,resize,zoom,shapes are present
86 lines (77 loc) • 3.06 kB
Markdown
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)
``` html
<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>
```
``` html
<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](https://dhruuva.github.io/we-do-chart/)
Go [we-do-chart](https://codepen.io/dhruuva/pen/RNWgNLE) by Aleksey Bazhenov
([@dhruuva](https://codepen.io/dhruuva)) on [CodePen](https://codepen.io).
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](https://github.com/Dhruuva/we-do-chart?tab=MIT-1-ov-file#readme).