# @canvasjs/vue-charts

> CanvasJS Vue Charts - Official

Latest version **1.0.4** (published 2024-02-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @canvasjs/vue-charts
pnpm add @canvasjs/vue-charts
yarn add @canvasjs/vue-charts
bun add @canvasjs/vue-charts
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2024-02-29 |
| First published | 2023-05-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 9.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | fenopix |
| Maintainers | canvasjs |
| Keywords | vue, charts, vue graphs, vue charting library, vue chart library, vue charts, html5 charts, graphs, dataviz, canvasjs, vue.js charts, high performance charts, vue line charts, vue area charts, vue bar charts, vue pie charts |

## Links

- npm: https://www.npmjs.com/package/@canvasjs/vue-charts
- Homepage: https://canvasjs.com/vuejs-charts/
- npm.io page: https://npm.io/package/@canvasjs/vue-charts

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) >=3.0.0
- [@canvasjs/charts](https://npm.io/package/@canvasjs/charts.md) ^3.7.5

## 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.4 (latest) — 2024-02-29
- 1.0.3 — 2024-02-26
- 1.0.1 — 2023-05-26
- 1.0.0 — 2023-05-26

## README

<div align="center">
	<a href="https://www.npmjs.com/~canvasjs">
		<img src="https://canvasjs.com/wp-content/uploads/images/logo/canvasjs-logo-240x100.png" alt="CanvasJS"/>
	</a>
</div>

# CanvasJS Vue Charts Plugin - Official
CanvasJS [Vue Chart](https://canvasjs.com/vuejs-charts/) Plugin for creating interactive charts and graphs for your Vue.js applications. Library supports a wide range of chart types including bar, line, area, pie, doughnut, candlestick & more. It's also bundled with features like interactivity, animation, zooming / panning, exporting as image, etc.

<br/>

<a href="https://canvasjs.com/vuejs-charts/">
	<img src="https://canvasjs.com/wp-content/uploads/images/npm/vuejs/vuejs-charts.png" alt="CanvasJS Vue.js Charts">
</a>

<br/>

## Important Links
- [Official Website](https://canvasjs.com/)
- [Vue Charts Demo](https://canvasjs.com/vuejs-charts/)
- [Download CanvasJS](https://canvasjs.com/download-html5-charting-graphing-library/)
- [Vue Charts Integration](https://canvasjs.com/docs/charts/integration/vuejs/)
- [Chart Documentation](https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/)
- [CanvasJS Support Forum](https://canvasjs.com/forums/)

<br/>

## Installing CanvasJS Vue Charts
Install CanvasJS Vue Charts package to your Vue application via NPM.
##### Install Vue Charts via NPM
```
npm install @canvasjs/vue-charts
```
See [npm documentation](https://docs.npmjs.com/) to know more about npm usage.

##### Import Vue Chart plugin & install it
Import the Vue Charts plugin to your Vue.js application & install it.
```
import { createApp } from 'vue'
import App from './App.vue'

import CanvasJSChart from '@canvasjs/vue-charts';

const app = createApp(App);
app.use(CanvasJSChart); // install the CanvasJS Vuejs Chart Plugin
app.mount('#app');
```

##### Set the chart-options & create chart
Set the chart-options in app.vue & use 'CanvasJSChart' selector to create chart inside template tag.
```
<!-- App.vue -->
<script>
export default {
  data() {
    return {
      chart: null,
      options: {
        animationEnabled: true,
        title:{
          text: "Vue.js Basic Column Chart"
        },
        data: [{
          type: "column",
          dataPoints: [
            { label: "apple",  y: 10 },
            { label: "orange", y: 15 },
            { label: "banana", y: 25 },
            { label: "mango",  y: 30 },
            { label: "grape",  y: 28 }
          ]
        }]
      }
    }
  }
}
</script>
<template>
    <CanvasJSChart :options="options"/>
</template>
```

<br/>

<img src="https://canvasjs.com/wp-content/uploads/images/npm/vuejs/vuejs-column-chart.png" alt="Vue.js Column Chart">

<br/>

#### Vue Chart with Animation
<a href="https://canvasjs.com/vuejs-charts/animated-chart/"><img src="https://canvasjs.com/wp-content/uploads/images/npm/vuejs/animated-vue-charts.gif" alt="Animated Vue.js Charts"></a>

<br/>

#### Vue Chart with Multiple Y-axes
<a href="https://canvasjs.com/vuejs-charts/chart-multiple-axes/"><img src="https://canvasjs.com/wp-content/uploads/images/npm/vuejs/vue-charts-multiple-axis.gif" alt="Vue.js Chart with Multiple Y-axes"></a>

<br/>

#### Interactive Vue Chart
<a href="https://canvasjs.com/vuejs-charts/multiseries-chart/"><img src="https://canvasjs.com/wp-content/uploads/images/npm/vuejs/interactive-vue-charts.gif" alt="Vue.js Interactive Charts"></a>

<br/>

#### Vue Chart with Zooming / Panning
<a href="https://canvasjs.com/vuejs-charts/chart-with-zoom-pan/"><img src="https://canvasjs.com/wp-content/uploads/images/npm/vuejs/vue-charts-zoom-pan.gif" alt="Vue.js Chart with Zooming / Panning"></a>

<br />

### Related Chart Packages
* [JavaScript Charts](https://www.npmjs.com/package/@canvasjs/charts)
* [React Charts](https://www.npmjs.com/package/@canvasjs/react-charts)
* [Angular Charts](https://www.npmjs.com/package/@canvasjs/angular-charts)
* [jQuery Charts](https://www.npmjs.com/package/@canvasjs/jquery-charts)

---
_Source: https://npm.io/package/@canvasjs/vue-charts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._