A Simple ChartJS Wrapper for Vue3

A Simple ChartJS Wrapper for Vue3
Component props use the same structure as ChartJS arguments and are passed as-is to the instance of ChartJS. You are able to use direct examples from their documentation. View the ChartJS Docs for more examples.

Vue3 ChartJS Wrapper

Basic ChartJS wrapper for Vue3

Requirements

  • Vue3
  • ChartJS 2.9

Installation

yarn add @j-t-mcc/vue3-chartjs

npm install @j-t-mcc/vue3-chartjs

Configuration

Component props use the same structure as ChartJS arguments and are passed as-is to the instance of ChartJS. You are able to use direct examples from their documentation. View the ChartJS Docs for more examples.

  props: {
    type: {
      type: String,
      required: true
    },
    data: {
      type: Object,
      required: true
    },
    options: {
      type: Object,
      default: () => ({})
    },
    plugins: {
      type: Array,
      default: () => []
    }
  }

Events

A default event hook plugin is injected into each chart object and emits the following events: ChartJS events

Event listeners are converted to camelcase in Vue3. Events marked as “cancellable” in the ChartJS documentation can be “canceled” by calling the preventDefault method on the event parameter available in your event function.

Methods

This library only implements a few ChartJS methods for some common interactions and are available by reference:

chartRef.value.update(animationSpeed = 750)
chartRef.value.resize()
chartRef.value.destroy()

If you require additional access to ChartJS functionality, you can interact directly with the ChartJS object via the chartJSState attribute by reference:

const base64Image = chartRef.value.chartJSState.chart.toBase64Image()

See the ChartJS Docs for more

Examples

Below are some basic chart examples to get started.

Simple Chart

<template>
  <div style="height:600px;width: 600px; display: flex;flex-direction:column;">
    <vue3-chart-js
        :id="doughnutChart.id"
        :type="doughnutChart.type"
        :data="doughnutChart.data"
        @before-render="beforeRenderLogic"
    ></vue3-chart-js>
  </div>
</template>

<script>
import Vue3ChartJs from '@j-t-mcc/vue3-chartjs'

export default {
  name: 'App',
  components: {
    Vue3ChartJs,
  },
  setup () {
    const doughnutChart = {
      id: 'doughnut',
      type: 'doughnut',
      data: {
        labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
        datasets: [
          {
            backgroundColor: [
              '#41B883',
              '#E46651',
              '#00D8FF',
              '#DD1B16'
            ],
            data: [40, 20, 80, 10]
          }
        ]
      }
    }

    const beforeRenderLogic = (event) => {
      //...
      //if(a === b) {
      //  event.preventDefault()
      //}   
    }    

    return {
      doughnutChart,
      beforeRenderLogic
    }
  },
}
</script>

Updating chart

Here is an example of updating the data, labels and title in a chart.

See the ChartJS docs for more details on updating charts.

<template>
  <div style="height:600px;width: 600px;display: flex;flex-direction:column;">
    <vue3-chart-js
        :id="doughnutChart.id"
        ref="chartRef"
        :type="doughnutChart.type"
        :data="doughnutChart.data"
        :options="doughnutChart.options"
    ></vue3-chart-js>

    <button @click="updateChart">Update Chart</button>
  </div>
</template>

<script>
import { ref } from 'vue'
import Vue3ChartJs from '@j-t-mcc/vue3-chartjs'

export default {
  name: 'App',
  components: {
    Vue3ChartJs,
  },
  setup () {
    const chartRef = ref(null)

    const doughnutChart = {
      id: 'doughnut',
      type: 'doughnut',
      data: {
        labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
        datasets: [
          {
            backgroundColor: [
              '#41B883',
              '#E46651',
              '#00D8FF',
              '#DD1B16'
            ],
            data: [40, 20, 80, 10]
          }
        ]
      },
      options: {}
    }

    const updateChart = () => {
      doughnutChart.options.title = {
          text: 'Updated Chart',
          display: true  
      }   
      doughnutChart.data.labels = ['Cats', 'Dogs', 'Hamsters', 'Dragons']
      doughnutChart.data.datasets = [
        {
          backgroundColor: [
            '#333333',
            '#E46651',
            '#00D8FF',
            '#DD1B16'
          ],
          data: [100, 20, 800, 20]
        }
      ]

      chartRef.value.update(250)
    }

    return {
      doughnutChart,
      updateChart,
      chartRef
    }
  },
}
</script>

Exporting Chart as PNG

<template>
  <div style="height:600px;width: 600px; display: flex;flex-direction:column;">
    <button type="submit" @click="exportChart">Export Chart as PNG</button>
    <vue3-chart-js
        :id="doughnutChart.id"
        ref="chartRef"
        :type="doughnutChart.type"
        :data="doughnutChart.data"
    ></vue3-chart-js>
  </div>
</template>

<script>
import { ref } from 'vue'
import Vue3ChartJs from '@j-t-mcc/vue3-chartjs'

export default {
  name: 'App',
  components: {
    Vue3ChartJs,
  },
  setup () {
    const chartRef = ref(null)
    const doughnutChart = {
      id: 'doughnut',
      type: 'doughnut',
      data: {
        labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
        datasets: [
          {
            backgroundColor: [
              '#41B883',
              '#E46651',
              '#00D8FF',
              '#DD1B16'
            ],
            data: [40, 20, 80, 10]
          }
        ]
      }
    }

    const exportChart = () => {
      let a = document.createElement('a')
      a.href = chartRef.value.chartJSState.chart.toBase64Image()
      a.download = 'image-export.png'
      a.click()
      a = null
    }

    return {
      chartRef,
      doughnutChart,
      exportChart
    }
  },
}
</script>

Demo

For a demo, Clone this repository and run:

yarn install

yarn dev

Download Details:

Author: J-T-McC

Demo: https://www.chartjs.org/

Source Code: https://github.com/J-T-McC/vue3-chartjs

Suggest:

Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework

Is Vue.js 3.0 Breaking Vue? Vue 3.0 Preview!

Learn Vue.js from scratch 2018

Vue.js Tutorial: Zero to Sixty

Learn Vue.js from Scratch - Full Course for Beginners

JavaScript Programming Tutorial Full Course for Beginners