Merge pull request #10 from coreui/fix-custom-tooltips

fix: custom tooltips do not show
fix: scales.[x/y]Axes.barPercentage is deprecated

Author: xidedix

resources/js/coreui/main.js

@@ -14,8 +14,9 @@ Chart.defaults.global.pointHitDetectionRadius = 1
 Chart.defaults.global.tooltips.enabled = false
 Chart.defaults.global.tooltips.mode = 'index'
 Chart.defaults.global.tooltips.position = 'nearest'
-Chart.defaults.global.tooltips.custom = coreui.ChartJS.CustomTooltips
+Chart.defaults.global.tooltips.custom = coreui.ChartJS.customTooltips
 Chart.defaults.global.defaultFontColor = '#646470'
+Chart.defaults.global.responsiveAnimationDuration = 1
 
 document.body.addEventListener('classtoggle', event => {
   if (event.detail.className === 'c-dark-theme') {
@@ -192,9 +193,10 @@ const cardChart4 = new Chart(document.getElementById('card-chart4'), {
         label: 'My First dataset',
         backgroundColor: 'rgba(255,255,255,.2)',
         borderColor: 'rgba(255,255,255,.55)',
-        data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82]
+        data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
+        barPercentage: 0.7
       }
-    ]
+    ],
   },
   options: {
     maintainAspectRatio: false,
@@ -203,8 +205,7 @@ const cardChart4 = new Chart(document.getElementById('card-chart4'), {
     },
     scales: {
       xAxes: [{
-        display: false,
-        barPercentage: 0.6
+        display: false
       }],
       yAxes: [{
         display: false
@@ -273,6 +274,14 @@ const mainChart = new Chart(document.getElementById('main-chart'), {
         hoverRadius: 4,
         hoverBorderWidth: 3
       }
+    },
+    tooltips: {
+      intersect: true,
+      callbacks: {
+        labelColor: function(tooltipItem, chart) {
+          return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor };
+        }
+      }
     }
   }
 })

resources/js/coreui/widgets.js

@@ -13,7 +13,7 @@ Chart.defaults.global.pointHitDetectionRadius = 1
 Chart.defaults.global.tooltips.enabled = false
 Chart.defaults.global.tooltips.mode = 'index'
 Chart.defaults.global.tooltips.position = 'nearest'
-Chart.defaults.global.tooltips.custom = coreui.ChartJS.CustomTooltips
+Chart.defaults.global.tooltips.custom = coreui.ChartJS.customTooltips
 
 document.body.addEventListener('classtoggle', event => {
   if (event.detail.className === 'c-dark-theme') {
@@ -187,7 +187,8 @@ const cardChart4 = new Chart(document.getElementById('card-chart4'), {
         label: 'My First dataset',
         backgroundColor: 'rgba(255,255,255,.2)',
         borderColor: 'rgba(255,255,255,.55)',
-        data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82]
+        data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
+        barPercentage: 0.7
       }
     ]
   },
@@ -198,8 +199,7 @@ const cardChart4 = new Chart(document.getElementById('card-chart4'), {
     },
     scales: {
       xAxes: [{
-        display: false,
-        barPercentage: 0.6
+        display: false
       }],
       yAxes: [{
         display: false