Home
Chart & Graph
Vue.js Wrapper For Chart.js

Vue.js Wrapper For Chart.js

apertureless Added 2 years ago
Live Demo Download Source Code

Install & Download:

Description:

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:

Vue.js Wrapper For Chart.js

Changelog:

v5.3.0 (12/14/2023)

  • a11y: support ARIA attributes, role and fallback content for canvas
  • Bug Fixes

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

Add Comment