feat(charts): CustomTooltips

Author: xidedix

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@coreui/coreui": "^2.0.0-beta.10",
+    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.0.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/js/';
 
 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/js/';
 
 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: {
@@ -392,6 +418,10 @@ const mainChart = {
 };
 
 const mainChartOpts = {
+  tooltips: {
+    enabled: false,
+    custom: CustomTooltips
+  },
   maintainAspectRatio: false,
   legend: {
     display: false,