How to use vue-chartjs - 10 common examples

import Chart from 'chart.js'
import { Line, mixins } from 'vue-chartjs'
import tailwindConfig from '@tailwind'

Chart.defaults.global.defaultFontFamily = tailwindConfig.fonts.sans.join(',')
// TODO: Add theme colors

export default {
  extends: Line,

  mixins: [mixins.reactiveProp],

  props: {
    chartData: {
      type: Object,
      required: true
    },
    options: {
      type: Object,
      required: true
    }
  },

  mounted () {
    this.$once('chart:render', () => {
      this.$emit('ready')
    })

import { Line, mixins } from 'vue-chartjs';
const { reactiveProp } = mixins;

export default Line.extend({
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.chartData, this.options);
  }
});

import { mixins } from 'vue-chartjs'
import { defaultConfig } from '../VaChartConfigs'

export const chartMixin = {
  mixins: [mixins.reactiveProp],
  props: ['data', 'chartOptions'],
  mounted () {
    this.refresh()
  },
  methods: {
    refresh () {
      this.renderChart(this.chartData, this.options)
    },
  },
  computed: {
    // `this.options` is used by vue-chartjs mixin on refresh.
    options () {
      return Object.assign({}, defaultConfig, this.chartOptions)
    },
  },
}

// import 'chart.js'
import {Bar} from 'vue-chartjs'

export default Bar.extend({
  mounted () {
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})
  }
})

import {
  Bar
} from 'vue-chartjs'

export default Bar.extend({
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [{
        label: 'GitHub Commits',
        backgroundColor: '#e91e63',
        data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
      }]
    })
  }
})

if (functional) component.functional = true;
  }

  component._scopeId = scope;

  return component;
}
/* style inject */

/* style inject SSR */

var CuiWidget08 = __vue_normalize__$s({ render: __vue_render__$s, staticRenderFns: __vue_staticRenderFns__$s }, __vue_inject_styles__$s, __vue_script__$s, __vue_scope_id__$s, __vue_is_functional_template__$s, __vue_module_identifier__$s, undefined, undefined);

var script$t = {
  name: 'CuiSimpleBarChart',
  extends: vueChartjs.Bar,
  mixins: [chartMixins.generatedLabels, chartMixins.generatedBackgroundColor, chartMixins.generatedBorderColor, chartMixins.generatedOptions],
  props: {
    data: {
      type: Array,
      default: function _default() {
        return [0, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12];
      }
    },
    height: {
      type: Number,
      default: 40
    },
    label: {
      type: String,
      default: 'label|string'
    },

// import 'chart.js'
import {Doughnut} from 'vue-chartjs'

export default Doughnut.extend({
  mounted () {
    this.renderChart({
      labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
      datasets: [
        {
          backgroundColor: [
            '#41B883',
            '#E46651',
            '#00D8FF',
            '#DD1B16'
          ],
          data: [40, 20, 80, 10]
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})
  }

if (functional) component.functional = true;
  }

  component._scopeId = scope;

  return component;
}
/* style inject */

/* style inject SSR */

var CuiSimpleBarChart = __vue_normalize__$t({}, __vue_inject_styles__$t, __vue_script__$t, __vue_scope_id__$t, __vue_is_functional_template__$t, __vue_module_identifier__$t, undefined, undefined);

var script$u = {
  name: 'CuiSimpleLineChart',
  extends: vueChartjs.Line,
  mixins: [chartMixins.generatedLabels, chartMixins.generatedBackgroundColor, chartMixins.generatedBorderColor, chartMixins.generatedPointHoverBackgroundColor, chartMixins.generatedOptions],
  props: {
    data: {
      type: Array,
      default: function _default() {
        return [0, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12];
      }
    },
    height: {
      type: Number,
      default: 40
    },
    label: {
      type: String,
      default: 'label|string'
    },