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", "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", "description": "CoreUI React Open Source Bootstrap 4 Admin Template",
"author": "Łukasz Holeczek", "author": "Łukasz Holeczek",
"homepage": "https://coreui.io", "homepage": "https://coreui.io",
@ -13,7 +13,7 @@
}, },
"dependencies": { "dependencies": {
"@coreui/coreui": "^2.0.0-beta.10", "@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", "@coreui/react": "^2.0.0-beta.1",
"bootstrap": "^4.1.0", "bootstrap": "^4.1.0",
"chart.js": "^2.7.2", "chart.js": "^2.7.2",

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

@ -1,7 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Bar, Doughnut, Line, Pie, Polar, Radar } from 'react-chartjs-2'; import { Bar, Doughnut, Line, Pie, Polar, Radar } from 'react-chartjs-2';
import { Card, CardBody, CardColumns, CardHeader } from 'reactstrap'; 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 = { const line = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],

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

@ -21,7 +21,7 @@ import {
Table, Table,
} from 'reactstrap'; } from 'reactstrap';
import Widget03 from '../../views/Widgets/Widget03' 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 brandPrimary = '#20a8d8';
const brandSuccess = '#4dbd74'; const brandSuccess = '#4dbd74';
@ -387,7 +387,7 @@ for (var i = 0; i <= elements; i++) {
} }
const mainChart = { 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: [ datasets: [
{ {
label: 'My First dataset', label: 'My First dataset',
@ -420,7 +420,15 @@ const mainChart = {
const mainChartOpts = { const mainChartOpts = {
tooltips: { tooltips: {
enabled: false, 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, maintainAspectRatio: false,
legend: { legend: {