Coding Reference

Props

There are some basic props defined in the components provided by vue-chartjs. Because you extend them, they are invisible, but you can overwrite them:

Prop	Description
width	chart width
height	chart height
chart-id	id of the canvas
css-classes	String with css classes for the surrounding div
styles	Object with css styles for the surrounding div container
plugins	Array with chartjs plugins

Events

If the reactiveData or reactiveProp mixin is attached, following events will be emitted:

Event	Description
chart:render	if the mixin performs a complete rerender
chart:destroy	if the mixin deletes the chart object instance
chart:update	if the mixin performs an update instead of a re-render
labels:update	if new labels were set
xlabels:update	if new xLabels were set
ylabels:update	if new yLabels were set

Global Methods

Global Methods need to be imported.

generateChart

• Type: Function
• Arguments: chart-id, chart-type
• Usage:

import { generateChart } from 'vue-chartjs'
// First argument is the chart-id, second the chart type.
const CustomLine = generateChart('custom-line', 'LineWithLine')

Instance Methods

Instance methods can be used inside your chart component.

generateLegend()

Helper function to generate a HTML legend.

• Type: Function
• Arguments: none
• Usage:

import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  props: ['datasets', 'options']
  data: () => ({
    htmlLegend: null
  })
  mounted () {
    this.renderChart(this.datasets, this.options)
    this.htmlLegend = this.generateLegend()
  }
}

addPlugin

In Chart.js you can define global and inline plugins. Global plugins are working without problems with vue-chartjs like in the Chart.js docs described.

If you want to add inline plugins, vue-chartjs exposes a helper method called addPlugin() You should call addPlugin() before the renderChart() method.

• Type: Function
• Arguments: Array of Plugins
• Usage:

mounted () {
  this.addPlugin({
    id: 'my-plugin',
    beforeInit: function (chart) {
      ....
    }
  })
}

renderChart()

Creates a Chart.js instance and renders the chart.

• Type: Function
• Arguments: Chart Data, Chart Options
• Usage:

mounted () {
  this.renderChart({
    labels: ['January', 'February'],
    datasets: [
      {
        label: 'Data One',
        backgroundColor: '#f87979',
        data: [40, 20]
      }
    ]},
    {
      responsive: true
    }
  )
}

Chart.js Object

You can access the Chart.js object inside your chart component with this.$data._chart

Canvas

You can access the canvas with this.$refs.canvas