upd: chart.js to v3; vue-chartjs to v4

Author: vikdiesel

src/components/Charts/LineChart.vue

@@ -1,31 +1,53 @@
+<template>
+  <line-chart-element
+    :chart-id="chartId"
+    :chart-options="chartOptions"
+    :chart-data="chartData"
+    :width="width"
+    :height="height"
+  />
+</template>
+
 <script>
-import { Line, mixins } from 'vue-chartjs'
+import { Line as LineChartElement } from 'vue-chartjs/legacy'
+import {
+  Chart,
+  LineElement,
+  PointElement,
+  LineController,
+  LinearScale,
+  CategoryScale,
+  Tooltip
+} from 'chart.js'
+
+Chart.register(LineElement, PointElement, LineController, LinearScale, CategoryScale, Tooltip)
 
 export default {
   name: 'LineChart',
-  extends: Line,
-  mixins: [mixins.reactiveProp],
+  components: {
+    LineChartElement
+  },
   props: {
-    extraOptions: {
+    chartId: {
+      type: String,
+      default: 'line-chart'
+    },
+    chartData: {
       type: Object,
-      default: undefined
-    }
-  },
-  data () {
-    return {
-      ctx: null
+      default: null
+    },
+    chartOptions: {
+      type: Object,
+      default: null
+    },
+    width: {
+      type: Number,
+      default: 400
+    },
+    height: {
+      type: Number,
+      default: 150
     }
-  },
-  mounted () {
-    this.$watch(
-      'chartData',
-      (newVal, oldVal) => {
-        if (!oldVal) {
-          this.renderChart(this.chartData, this.extraOptions)
-        }
-      },
-      { immediate: true }
-    )
   }
 }
 </script>

src/components/Charts/chart.config.js

@@ -6,55 +6,6 @@ export const chartColors = {
   }
 }
 
-export const chartOptionsMain = {
-  maintainAspectRatio: false,
-  legend: {
-    display: false
-  },
-  responsive: true,
-  tooltips: {
-    backgroundColor: '#f5f5f5',
-    titleFontColor: '#333',
-    bodyFontColor: '#666',
-    bodySpacing: 4,
-    xPadding: 12,
-    mode: 'nearest',
-    intersect: 0,
-    position: 'nearest'
-  },
-  scales: {
-    yAxes: [
-      {
-        barPercentage: 1.6,
-        gridLines: {
-          drawBorder: false,
-          color: 'rgba(29,140,248,0.0)',
-          zeroLineColor: 'transparent'
-        },
-        ticks: {
-          padding: 20,
-          fontColor: '#9a9a9a'
-        }
-      }
-    ],
-
-    xAxes: [
-      {
-        barPercentage: 1.6,
-        gridLines: {
-          drawBorder: false,
-          color: 'rgba(225,78,202,0.1)',
-          zeroLineColor: 'transparent'
-        },
-        ticks: {
-          padding: 20,
-          fontColor: '#9a9a9a'
-        }
-      }
-    ]
-  }
-}
-
 const randomChartData = n => {
   const data = []
 

src/views/Home.vue

@@ -59,11 +59,9 @@
           class="chart-area"
         >
           <line-chart
-            ref="bigChart"
-            style="height: 100%;"
-            chart-id="big-line-chart"
             :chart-data="chartData"
-            :extra-options="chartOptions"
+            :chart-options="{responsive: true}"
+            :style="{height: '100%'}"
           />
         </div>
       </card-component>
@@ -104,7 +102,6 @@ export default {
   data () {
     return {
       titleStack: ['Admin', 'Dashboard'],
-      chartOptions: chartConfig.chartOptionsMain,
       chartData: null
     }
   },

vue.config.js

@@ -1,15 +1,5 @@
 module.exports = {
   publicPath: process.env.DEPLOY_ENV === 'GH_PAGES'
     ? '/admin-one-vue-bulma-dashboard/'
-    : '/',
-
-  // Remove moment.js from chart.js
-  // https://www.chartjs.org/docs/latest/getting-started/integration.html#bundlers-webpack-rollup-etc
-  configureWebpack: config => {
-    return {
-      externals: {
-        moment: 'moment'
-      }
-    }
-  }
+    : '/'
 }