CoreUI Vue.js wrapper for Chart.js
Explore @coreui/vue-chartjs docs & examples »
Report bug
·
Request feature
·
Blog
## Status
[![npm package][npm-badge]][npm]
[![NPM downloads][npm-download]][npm]
[npm-badge]: https://img.shields.io/npm/v/@coreui/vue-chartjs/latest?style=flat-square
[npm]: https://www.npmjs.com/package/@coreui/vue-chartjs
[npm-download]: https://img.shields.io/npm/dm/@coreui/vue-chartjs.svg?style=flat-square
##### install:
```bash
npm install @coreui/vue-chartjs
# or
yarn add @coreui/vue-chartjs
```
##### import:
```jsx
import { CChart } from '@coreui/vue-chartjs'
```
or
```js
import {
CChart,
CChartBar,
CChartHorizontalBar,
CChartLine,
CChartDoughnut,
CChartRadar,
CChartPie,
CChartPolarArea,
} from '@coreui/vue-chartjs'
```
##### props:
```js
/**
* Enables custom html based tooltips instead of standard tooltips.
*
* @default true
*/
customTooltips: {
type: Boolean,
default: true,
required: false,
},
/**
* The data object that is passed into the Chart.js chart (more info).
*/
data: {
type: [Object, Function] as PropType ChartData)>,
required: true,
},
/**
* Height attribute applied to the rendered canvas.
*
* @default 150
*/
height: {
type: Number,
default: 150,
required: false,
},
/**
* ID attribute applied to the rendered canvas.
*/
id: {
type: String,
default: undefined,
required: false,
},
/**
* The options object that is passed into the Chart.js chart.
*
* {@link https://www.chartjs.org/docs/latest/general/options.html More Info}
*/
options: {
type: Object as PropType,
default: undefined,
required: false,
},
/**
* The plugins array that is passed into the Chart.js chart (more info)
*
* {@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info}
*/
plugins: {
type: Array as PropType,
default: undefined,
},
/**
* If true, will tear down and redraw chart on all updates.
*/
redraw: Boolean,
/**
* Chart.js chart type.
*
* @type {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
*/
type: {
type: String as PropType,
default: 'bar',
required: false,
},
/**
* Width attribute applied to the rendered canvas.
*
* @default 300
*/
width: {
type: Number,
default: 300,
required: false,
},
/**
* Put the chart into the wrapper div element.
*
* @default true
*/
wrapper: {
type: Boolean,
default: true,
required: false,
},
```
##### usage:
```vue
```