@canvasjs/vue-charts/README.md

CanvasJS Vue Charts - Official

<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)