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