Merge pull request #69 from coreui/dev-v2-tooltips

feat: chart.js custom tooltips plugin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-react-admin-template",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.2",
   "description": "CoreUI React Open Source Bootstrap 4 Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "https://coreui.io",
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@coreui/coreui": "^2.0.0-beta.10",
+    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
     "@coreui/react": "^2.0.0-beta.1",
     "bootstrap": "^4.1.0",
     "chart.js": "^2.7.2",

src/views/Charts/Charts.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { Bar, Doughnut, Line, Pie, Polar, Radar } from 'react-chartjs-2';
 import { Card, CardBody, CardColumns, CardHeader } from 'reactstrap';
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips';
 
 const line = {
   labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
@@ -142,6 +143,14 @@ const polar = {
   ],
 };
 
+const options = {
+  tooltips: {
+    enabled: false,
+    custom: CustomTooltips
+  },
+  maintainAspectRatio: false
+}
+
 class Charts extends Component {
   render() {
     return (
@@ -158,7 +167,7 @@ class Charts extends Component {
             </CardHeader>
             <CardBody>
               <div className="chart-wrapper">
-                <Line data={line} options={{ maintainAspectRatio: false, }} />
+                <Line data={line} options={options} />
               </div>
             </CardBody>
           </Card>
@@ -173,7 +182,7 @@ class Charts extends Component {
             </CardHeader>
             <CardBody>
               <div className="chart-wrapper">
-                <Bar data={bar} options={{ maintainAspectRatio: false, }} />
+                <Bar data={bar} options={options} />
               </div>
             </CardBody>
           </Card>
@@ -233,7 +242,7 @@ class Charts extends Component {
             </CardHeader>
             <CardBody>
               <div className="chart-wrapper">
-                <Polar data={polar} />
+                <Polar data={polar} options={options}/>
               </div>
             </CardBody>
           </Card>

src/views/Dashboard/Dashboard.js

@@ -21,6 +21,7 @@ import {
   Table,
 } from 'reactstrap';
 import Widget03 from '../../views/Widgets/Widget03'
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips';
 
 const brandPrimary = '#20a8d8';
 const brandSuccess = '#4dbd74';
@@ -42,6 +43,10 @@ const cardChartData1 = {
 };
 
 const cardChartOpts1 = {
+  tooltips: {
+    enabled: false,
+    custom: CustomTooltips
+  },
   maintainAspectRatio: false,
   legend: {
     display: false,
@@ -78,8 +83,9 @@ const cardChartOpts1 = {
       hitRadius: 10,
       hoverRadius: 4,
     },
-  },
-};
+  }
+}
+
 
 // Card Chart 2
 const cardChartData2 = {
@@ -95,6 +101,10 @@ const cardChartData2 = {
 };
 
 const cardChartOpts2 = {
+  tooltips: {
+    enabled: false,
+    custom: CustomTooltips
+  },
   maintainAspectRatio: false,
   legend: {
     display: false,
@@ -149,6 +159,10 @@ const cardChartData3 = {
 };
 
 const cardChartOpts3 = {
+  tooltips: {
+    enabled: false,
+    custom: CustomTooltips
+  },
   maintainAspectRatio: false,
   legend: {
     display: false,
@@ -189,6 +203,10 @@ const cardChartData4 = {
 };
 
 const cardChartOpts4 = {
+  tooltips: {
+    enabled: false,
+    custom: CustomTooltips
+  },
   maintainAspectRatio: false,
   legend: {
     display: false,
@@ -233,6 +251,10 @@ const makeSocialBoxData = (dataSetNo) => {
 };
 
 const socialChartOpts = {
+  tooltips: {
+    enabled: false,
+    custom: CustomTooltips
+  },
   responsive: true,
   maintainAspectRatio: false,
   legend: {
@@ -303,6 +325,10 @@ const makeSparkLineData = (dataSetNo, variant) => {
 };
 
 const sparklineChartOpts = {
+  tooltips: {
+    enabled: false,
+    custom: CustomTooltips
+  },
   responsive: true,
   maintainAspectRatio: true,
   scales: {
@@ -361,7 +387,7 @@ for (var i = 0; i <= elements; i++) {
 }
 
 const mainChart = {
-  labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S'],
+  labels: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
   datasets: [
     {
       label: 'My First dataset',
@@ -392,6 +418,18 @@ const mainChart = {
 };
 
 const mainChartOpts = {
+  tooltips: {
+    enabled: false,
+    custom: CustomTooltips,
+    intersect: true,
+    mode: 'index',
+    position: 'nearest',
+    callbacks: {
+      labelColor: function(tooltipItem, chart) {
+        return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor }
+      }
+    }
+  },
   maintainAspectRatio: false,
   legend: {
     display: false,