Chart

Data visualization.

Basic

Use b-chart with chart-type or use specific chart such as b-bar-chart.

Bar chart

Line chart

Bubble chart

Donut chart

Pie chart

Polar area chart

Radar chart

Scatter chart

Custom chart

import { createTypedChart } from 'vue-chartjs'
import { LineController } from 'chart.js'

// The first argument is the chart-id, the second the chart type, third is the custom controller
const CustomLine = createTypedChart('custom-line', 'line', LineController)

Chart Attributes

Attribute	Description	Type	Accepted Values	Default
chart-data	Object with Chart data	Object	Ref	—
chart-options	Object with Chart options	Object	Ref	—
dataset-id-key	Index key in dataset	String	—	'label'
width	chart width, will ignore if options.responsive = true (default)	Number	—	400
height	chart height, will ignore if options.responsive = true (default)	Number	—	400
plugins	Array with Chart plugins	Array	Ref	—

Chart Events

Event Name	Description	Parameters
chart:rendered	if the chart object instance rendered	—
chart:destroyed	if the chart object instance removed	—
chart:updated	if the update handler performs an update instead of a re-render	—
labels:updated	if new labels were set	—

Chart Methods

Method	Description	Parameters
createTypedChart	Generate a custom chart	(chartId: string, chartType: string, chartController: ChartController)