# we-do-chart

> Nice looking and easy customize vue component for plot line-chart.Slider & resizing present.Truly responsive. Slide,resize,zoom,shapes are present

Latest version **1.0.24** (published 2025-09-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install we-do-chart
pnpm add we-do-chart
yarn add we-do-chart
bun add we-do-chart
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities; has provenance.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 1.0.24 |
| Published | 2025-09-23 |
| First published | 2021-03-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >= 18.0.0 |
| Dependencies | 1 |
| Unpacked size | 162.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 1 |
| Author | Aleksey Bazhenov |
| Maintainers | albazhenov |
| Keywords | vue, vue3, web-component, chart, line-chart, crosshair, chart-slider, charting, time-series |

## Links

- npm: https://www.npmjs.com/package/we-do-chart
- Repository: https://github.com/Dhruuva/we-do-chart
- Issues: https://github.com/Dhruuva/we-do-chart/issues
- npm.io page: https://npm.io/package/we-do-chart

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) 3.x

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.24 (latest) — 2025-09-23
- 1.0.23 — 2025-09-22
- 1.0.18 — 2025-09-17
- 1.0.16 — 2025-08-18
- 1.0.8 — 2022-11-20
- 1.0.5 — 2021-03-20
- 1.0.4 — 2021-03-16
- 1.0.1 — 2021-03-15
- 1.0.0 — 2021-03-10

## README

![npm](https://img.shields.io/npm/v/we-do-chart?color=green)
![npm](https://img.shields.io/npm/dw/we-do-chart)
![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/we-do-chart)
![MIT License](https://img.shields.io/github/license/dhruuva/we-do-chart.svg)
#  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)

``` 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>
```
## Or use directly  In-browser , CDN
``` 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>

```
## Elaborate manual
For more info about features, demonstration, customization options please see it here  [project pages](https://dhruuva.github.io/we-do-chart/)

## view demo
Go [we-do-chart](https://codepen.io/dhruuva/pen/RNWgNLE) by Aleksey Bazhenov
  ([@dhruuva](https://codepen.io/dhruuva)) on [CodePen](https://codepen.io).

## 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](https://github.com/Dhruuva/we-do-chart?tab=MIT-1-ov-file#readme).

---
_Source: https://npm.io/package/we-do-chart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
