Notus React Chartjs
The Chart.js charts refer to a graphical representation of data. Keep reading these simple yet flexible Javascript charting for designers & developers.
Usage
In order to use this plugin, you will have to import it like so:
import Chart from "chart.js";Also, do not forget to install it:
npm i -E [email protected]After that, simply copy one of the code examples demonstrated below and include it in your page.
Examples
Line Chart Example
Overview
Sales value
import React from "react";
import Chart from "chart.js";
export default function CardLineChart() {
React.useEffect(() => {
var config = {
type: "line",
data: {
labels: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
],
datasets: [
{
label: new Date().getFullYear(),
backgroundColor: "#3182ce",
borderColor: "#3182ce",
data: [65, 78, 66, 44, 56, 67, 75],
fill: false,
},
{
label: new Date().getFullYear() - 1,
fill: false,
backgroundColor: "#ed64a6",
borderColor: "#ed64a6",
data: [40, 68, 86, 74, 56, 60, 87],
},
],
},
options: {
maintainAspectRatio: false,
responsive: true,
title: {
display: false,
text: "Sales Charts",
fontColor: "white",
},
legend: {
labels: {
fontColor: "white",
},
align: "end",
position: "bottom",
},
tooltips: {
mode: "index",
intersect: false,
},
hover: {
mode: "nearest",
intersect: true,
},
scales: {
xAxes: [
{
ticks: {
fontColor: "rgba(255,255,255,.7)",
},
display: true,
scaleLabel: {
display: false,
labelString: "Month",
fontColor: "white",
},
gridLines: {
display: false,
borderDash: [2],
borderDashOffset: [2],
color: "rgba(33, 37, 41, 0.3)",
zeroLineColor: "rgba(0, 0, 0, 0)",
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2],
},
},
],
yAxes: [
{
ticks: {
fontColor: "rgba(255,255,255,.7)",
},
display: true,
scaleLabel: {
display: false,
labelString: "Value",
fontColor: "white",
},
gridLines: {
borderDash: [3],
borderDashOffset: [3],
drawBorder: false,
color: "rgba(255, 255, 255, 0.15)",
zeroLineColor: "rgba(33, 37, 41, 0)",
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2],
},
},
],
},
},
};
var ctx = document.getElementById("line-chart").getContext("2d");
window.myLine = new Chart(ctx, config);
}, []);
return (
<>
<div className="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-blueGray-700">
<div className="rounded-t mb-0 px-4 py-3 bg-transparent">
<div className="flex flex-wrap items-center">
<div className="relative w-full max-w-full flex-grow flex-1">
<h6 className="uppercase text-blueGray-100 mb-1 text-xs font-semibold">
Overview
</h6>
<h2 className="text-white text-xl font-semibold">Sales value</h2>
</div>
</div>
</div>
<div className="p-4 flex-auto">
{/* Chart */}
<div className="relative h-350-px">
<canvas id="line-chart"></canvas>
</div>
</div>
</div>
</>
);
}This component is already defined inside src/components/Cards/CardLineChart.js. Check it out.
Bar Chart Example
Performance
Total orders
import React from "react";
import Chart from "chart.js";
export default function CardBarChart() {
React.useEffect(() => {
let config = {
type: "bar",
data: {
labels: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
],
datasets: [
{
label: new Date().getFullYear(),
backgroundColor: "#ed64a6",
borderColor: "#ed64a6",
data: [30, 78, 56, 34, 100, 45, 13],
fill: false,
barThickness: 8,
},
{
label: new Date().getFullYear() - 1,
fill: false,
backgroundColor: "#3182ce",
borderColor: "#3182ce",
data: [27, 68, 86, 74, 10, 4, 87],
barThickness: 8,
},
],
},
options: {
maintainAspectRatio: false,
responsive: true,
title: {
display: false,
text: "Orders Chart",
},
tooltips: {
mode: "index",
intersect: false,
},
hover: {
mode: "nearest",
intersect: true,
},
legend: {
labels: {
fontColor: "rgba(0,0,0,.4)",
},
align: "end",
position: "bottom",
},
scales: {
xAxes: [
{
display: false,
scaleLabel: {
display: true,
labelString: "Month",
},
gridLines: {
borderDash: [2],
borderDashOffset: [2],
color: "rgba(33, 37, 41, 0.3)",
zeroLineColor: "rgba(33, 37, 41, 0.3)",
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2],
},
},
],
yAxes: [
{
display: true,
scaleLabel: {
display: false,
labelString: "Value",
},
gridLines: {
borderDash: [2],
drawBorder: false,
borderDashOffset: [2],
color: "rgba(33, 37, 41, 0.2)",
zeroLineColor: "rgba(33, 37, 41, 0.15)",
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2],
},
},
],
},
},
};
let ctx = document.getElementById("bar-chart").getContext("2d");
window.myBar = new Chart(ctx, config);
}, []);
return (
<>
<div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
<div className="rounded-t mb-0 px-4 py-3 bg-transparent">
<div className="flex flex-wrap items-center">
<div className="relative w-full max-w-full flex-grow flex-1">
<h6 className="uppercase text-blueGray-400 mb-1 text-xs font-semibold">
Performance
</h6>
<h2 className="text-blueGray-700 text-xl font-semibold">
Total orders
</h2>
</div>
</div>
</div>
<div className="p-4 flex-auto">
{/* Chart */}
<div className="relative h-350-px">
<canvas id="bar-chart"></canvas>
</div>
</div>
</div>
</>
);
}This component is already defined inside src/components/Cards/CardBarChart.js. Check it out.
Props
If you want to see more examples and properties please check the official ChartJS Documentation.
You can also check the Official ChartJS Github Repository.