refactor(charts): add CustomTooltips, add chartId prop

2018-05-25 17:47:07 +02:00
parent 4aa02846e3
commit c4d5ff886c
16 changed files with 371 additions and 229 deletions
@@ -1,20 +1,39 @@
 <script>
 import { Bar } from 'vue-chartjs'
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'

 export default {
  extends: Bar,
  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: '#f87979',
-          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
+    this.renderChart(
+      {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+        datasets: [
+          {
+            label: 'GitHub Commits',
+            backgroundColor: '#f87979',
+            data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
+          }
+        ]
+      },
+      {
+        responsive: true,
+        maintainAspectRatio: true,
+        tooltips: {
+          enabled: false,
+          custom: CustomTooltips,
+          intersect: true,
+          mode: 'index',
+          position: 'nearest',
+          callbacks: {
+            labelColor: function (tooltipItem, chart) {
+              return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].backgroundColor }
+            }
+          }
        }
-      ]
-    })
+      }
+    )
  }
 }
 </script>