Tailwind CSS Chart.js - Notus JS
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 charts on your page you will need to include the following script in the page’s footer:
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"
charset="utf-8"
></script>After that, simply copy one of the code examples demonstrated below and include it in your page.
Tailwind CSS Chart Examples
Line Chart Example
Check our beautiful chart examples that came in different styles
Overview
Sales value
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="shortcut icon" href="../../assets/img/favicon.ico" />
<link
rel="apple-touch-icon"
sizes="76x76"
href="../../assets/img/apple-icon.png"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css"
/>
<link
rel="stylesheet"
href="../../assets/vendor/@fortawesome/fontawesome-free/css/all.min.css"
/>
<link rel="stylesheet" href="../../assets/styles/tailwind.css" />
<title>Dashboard | Notus JS by Creative Tim</title>
</head>
<body class="text-blueGray-700 antialiased">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-blueGray-700"
>
<div class="rounded-t mb-0 px-4 py-3 bg-transparent">
<div class="flex flex-wrap items-center">
<div class="relative w-full max-w-full flex-grow flex-1">
<h6
class="uppercase text-blueGray-100 mb-1 text-xs font-semibold"
>
Overview
</h6>
<h2 class="text-white text-xl font-semibold">
Sales value
</h2>
</div>
</div>
</div>
<div class="p-4 flex-auto">
<!-- Chart -->
<div class="relative h-350-px">
<canvas id="line-chart"></canvas>
</div>
</div>
</div>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"
charset="utf-8"
></script>
<script type="text/javascript">
(function () {
/* Chart initialisations */
/* Line Chart */
var config = {
type: "line",
data: {
labels: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
],
datasets: [
{
label: new Date().getFullYear(),
backgroundColor: "#4c51bf",
borderColor: "#4c51bf",
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);
})();
</script>
</body>
</html>Bar Chart Example
Performance
Total orders
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="shortcut icon" href="../../assets/img/favicon.ico" />
<link
rel="apple-touch-icon"
sizes="76x76"
href="../../assets/img/apple-icon.png"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css"
/>
<link
rel="stylesheet"
href="../../assets/vendor/@fortawesome/fontawesome-free/css/all.min.css"
/>
<link rel="stylesheet" href="../../assets/styles/tailwind.css" />
<title>Dashboard | Notus JS by Creative Tim</title>
</head>
<body class="text-blueGray-700 antialiased">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded"
>
<div class="rounded-t mb-0 px-4 py-3 bg-transparent">
<div class="flex flex-wrap items-center">
<div class="relative w-full max-w-full flex-grow flex-1">
<h6
class="uppercase text-blueGray-400 mb-1 text-xs font-semibold"
>
Performance
</h6>
<h2 class="text-blueGray-700 text-xl font-semibold">
Total orders
</h2>
</div>
</div>
</div>
<div class="p-4 flex-auto">
<!-- Chart -->
<div class="relative h-350-px">
<canvas id="bar-chart"></canvas>
</div>
</div>
</div>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"
charset="utf-8"
></script>
<script type="text/javascript">
(function () {
/* Chart initialisations */
/* Bar Chart */
var 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: "#4c51bf",
borderColor: "#4c51bf",
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],
},
},
],
},
},
};
ctx = document.getElementById("bar-chart").getContext("2d");
window.myBar = new Chart(ctx, config);
})();
</script>
</body>
</html>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.