diff --git a/package.json b/package.json index caa5559..b408290 100644 --- a/package.json +++ b/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,7 +13,7 @@ }, "dependencies": { "@coreui/coreui": "^2.0.0-beta.10", - "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.0.0", + "@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", diff --git a/src/views/Charts/Charts.js b/src/views/Charts/Charts.js index 4415837..509a520 100644 --- a/src/views/Charts/Charts.js +++ b/src/views/Charts/Charts.js @@ -1,7 +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/'; +import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'; const line = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], diff --git a/src/views/Dashboard/Dashboard.js b/src/views/Dashboard/Dashboard.js index 8f7087f..43497df 100644 --- a/src/views/Dashboard/Dashboard.js +++ b/src/views/Dashboard/Dashboard.js @@ -21,7 +21,7 @@ import { Table, } from 'reactstrap'; import Widget03 from '../../views/Widgets/Widget03' -import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips/js/'; +import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'; const brandPrimary = '#20a8d8'; const brandSuccess = '#4dbd74'; @@ -387,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', @@ -420,7 +420,15 @@ const mainChart = { const mainChartOpts = { tooltips: { enabled: false, - custom: CustomTooltips + custom: CustomTooltips, + intersect: true, + mode: 'index', + position: 'nearest', + callbacks: { + labelColor: function(tooltipItem, chart) { + return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor } + } + } }, maintainAspectRatio: false, legend: {