gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: chart.js custom tooltips plugin

Browse Source
This commit is contained in:
xidedix 2018-04-24 12:55:21 +02:00
parent 1282b02ffc
commit 0e28db82e0
3 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -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",

2
src/views/Charts/Charts.js
View File

@ -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'],

14
src/views/Dashboard/Dashboard.js
View File

@ -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: {