Vue.js Wrapper For Chart.js

A Vue.js wrapper for Chart.js that helps you create reuseable charts for your Vuejs applications.

How to use it:

1. Import a chart type of your choice.

• Bar
• Doughnut
• Line
• Pie
• PolarArea
• Radar
• Bubble
• Scatter

import { Line } from 'vue-chartjs'

2. Create your component.

export default {
  extends: Line,
  props: {
    chartdata: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  },
  mounted () {
    this.renderChart(this.chartdata, this.options)
  }
}

3. Add your chart component to a parent component.

<line-chart :chartdata="chartData" :options="chartOptions"/>

4. All available props.

chartData: {
  type: Object,
  required: true
},
datasetIdKey: {
  type: String,
  default: 'label'
},
chartOptions: {
  type: Object,
  default: () => {}
},
chartId: {
  type: String,
  default: chartId
},
width: {
  type: Number,
  default: 400
},
height: {
  type: Number,
  default: 400
},
cssClasses: {
  type: String,
  default: ''
},
styles: {
  type: Object,
  default: () => {}
},
plugins: {
  type: Object,
  default: () => {}
}

Preview:

Changelog:

v5.2.0 (01/09/2023)

• restore compatability with webpack 4
• bugfix

v5.1.0 (12/19/2022)

• restore CommonJS bundle

v5.0.1 (12/06/2022)

• fix compatability with Vue >=2.7

v5.0.0 (12/05/2022)

• base Chart component
• drop Vue.js < 2.7 support
• events util
• fallthrough props to canvas
• updateMode prop
• upgrade Chart.js to v4

v4.1.2 (09/27/2022)

• fixed legacy multiple annotations

v4.1.1 (05/27/2022)

• bugfix

v4.1.0 (05/10/2022)

• add reactivity to options
• legacy-charts: add typescript definitions for legacy charts

v4.0.6 (04/21/2022)

• Bug Fixes

v4.0.5 (04/08/2022)

• legacy-charts: fix render multiple charts at one page

v4.0.4 (04/01/2022)

• change legacy chart instance type

v4.0.3 (03/29/2022)

• fix chart plugins type

v4.0.2 (03/28/2022)

• legacycharts: add missed export for legacy charts generateChart function

v4.0.1 (03/25/2022)

• chart.js 3.0 support
• migration to vue3
• typescript support
• vue2 legacy support

v3.5.1 (03/23/2022)

• feat: chart.js 3.0 support
• feat: vue2 legacy support

Download Details:

Author: apertureless

Live Demo: https://apertureless.github.io/vue-chartjs/

Download Link: https://github.com/apertureless/vue-chartjs/archive/master.zip

Official Website: https://github.com/apertureless/vue-chartjs

Install & Download: