Vue Chart.js Component API
Chart.js API
Explore the API reference for the Vue Chart.js component and discover how to effectively utilize its props for customization.
On this page CChart
import { CChart } from '@coreui/vue'
Props
| Property | Default | Type |
|---|
| customTooltips | true | boolean |
Enables custom html based tooltips instead of standard tooltips. |
| data | - | ChartData, ((canvas: HTMLCanvasElement) => ChartData) |
The data object that is passed into the Chart.js chart (more info). |
| height | 150 | number |
Height attribute applied to the rendered canvas. |
| id | - | string |
ID attribute applied to the rendered canvas. |
| options | - | ChartOptions |
The options object that is passed into the Chart.js chartRef.value. {@link https://www.chartjs.org/docs/latest/general/options.html More Info} |
| plugins | - | Plugin[] |
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} |
| redraw | - | boolean |
If true, will tear down and redraw chart on all updates. |
| type | 'bar' | ChartType |
Chart.js chart type. |
| width | 300 | number |
Width attribute applied to the rendered canvas. |
| wrapper | true | boolean |
Put the chart into the wrapper div element. |
Events
| Event name |
|---|
| getDatasetAtEvent |
Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event. |
| getElementAtEvent |
Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event. |
| getElementsAtEvent |
Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event. |