Charts Js
Chart Bar
<div class="relative">
<canvas class="w-full min-h-48" id="ChartBar"></canvas>
</div>
<script>
// Chart Bar
const taskChartElement = document.getElementById("ChartBar");
if (taskChartElement) {
const taskCtx = taskChartElement.getContext("2d");
const taskCompletionChart = new Chart(taskCtx, {
type: "bar",
data: {
labels: [
"May 1",
"May 2",
"May 3",
"May 4",
"May 5",
"May 6",
"May 7",
"May 8",
"May 9",
"May 10",
"May 11",
"May 12",
"May 13",
"May 14",
],
datasets: [
{
label: "Tasks Completed",
data: [5, 7, 6, 8, 10, 9, 12, 14, 11, 13, 15, 17, 16, 18],
backgroundColor: "#a855f7",
borderWidth: 0,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
grid: { display: false },
ticks: {
callback: function (value) {
return value + " tasks";
},
},
},
x: {
grid: { display: false }
},
},
plugins: {
legend: { display: false },
},
},
});
}
</script>
Chart Bar Horizontal
<div class="relative">
<canvas class="w-full min-h-48" id="ChartHorizontal"></canvas>
</div>
<script>
// Convert HEX TO RGBA
function hexToRGBA(hex, opacity) {
if (hex != null) {
return 'rgba(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16) }).concat(isFinite(opacity) ? opacity : 1).join(',') + ')';
}
}
// Chart Horizontal
const chart_pipeline = document.getElementById("ChartHorizontal");
if ( chart_pipeline != null) {
const ctb = chart_pipeline.getContext('2d');
const PipelineChart = new Chart(ctb, {
type: 'bar',
data: {
labels: [
'Qualified', 'Lead', 'Meeting', 'Proposal Send', 'Deal',
],
datasets: [{
label: 'Clents',
data: [270, 220, 155, 122, 98],
backgroundColor: [
hexToRGBA( '#a855f7', 0.2),
hexToRGBA( '#a855f7', 0.4),
hexToRGBA( '#a855f7', 0.6),
hexToRGBA( '#a855f7', 0.8),
'#a855f7'
],
borderColor: [
hexToRGBA( '#a855f7', 0.2),
hexToRGBA( '#a855f7', 0.4),
hexToRGBA( '#a855f7', 0.6),
hexToRGBA( '#a855f7', 0.8),
'#a855f7'
],
borderWidth: 1
}]
},
options: {
animation: {
x: {
duration: 4000,
from: 0
}
},
scales : {
x: {
display: true,
grid: {
lineWidth: 0.5
}
},
y: {
display: true,
grid: {
display: false
}
}
},
indexAxis: 'y',
elements: {
bar: {
borderWidth: 2,
}
},
responsive: true,
plugins: {
legend: {
display: false,
}
}
}
})
}
</script>
Chart Bar Compare
<div class="relative">
<canvas class="w-full min-h-48" id="ChartBarCompare"></canvas>
</div>
<script>
// Convert HEX TO RGBA
function hexToRGBA(hex, opacity) {
if (hex != null) {
return 'rgba(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16) }).concat(isFinite(opacity) ? opacity : 1).join(',') + ')';
}
}
// Chartbar Compare
const chart_bar = document.getElementById("ChartBarCompare");
if ( chart_bar != null) {
const ctbc = chart_bar.getContext('2d');
const BarChart = new Chart(ctbc, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
datasets: [{
label: '# Visitors',
data: [1170, 1321, 1835, 1834, 2183, 1504, 2175, 2521],
backgroundColor: [
hexToRGBA( '#a855f7', 0.6)
],
borderColor: [
hexToRGBA( '#a855f7', 0.6)
],
borderWidth: 1
},
{
label: '# Sales',
data: [670, 721, 835, 734, 683, 724, 875, 1021],
backgroundColor: [
'#a855f7',
],
borderColor: [
'#a855f7',
],
borderWidth: 1
}]
},
options: {
animation: {
y: {
duration: 4000,
from: 500
}
},
scales: {
x: {
display: true,
grid: {
display: false
}
},
y: {
display: true,
grid: {
lineWidth: 0.5
}
}
},
plugins: {
legend: {
display: true,
position: "bottom",
}
}
}
})
}
</script>
Chart Bar Combo
<div class="relative">
<canvas class="w-full min-h-48" id="ChartBarCombo"></canvas>
</div>
<script>
// Convert HEX TO RGBA
function hexToRGBA(hex, opacity) {
if (hex != null) {
return 'rgba(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16) }).concat(isFinite(opacity) ? opacity : 1).join(',') + ')';
}
}
// Chartbar Combo
const chart_traffic = document.getElementById("ChartBarCombo");
if ( chart_traffic != null) {
const ctbt = chart_traffic.getContext('2d');
const TrafficChart = new Chart(ctbt, {
type: 'bar',
data: {
labels: ['Aug 1', 'Aug 2', 'Aug 3', 'Aug 4', 'Aug 5', 'Aug 6', 'Aug 7'],
datasets: [{
label: 'Organic search',
data: [70, 41, 35, 83, 73, 64, 75],
backgroundColor: [
'#a855f7',
]
},
{
label: 'Direct',
data: [27, 17, 15, 19, 12, 17, 11],
backgroundColor: [
hexToRGBA( '#a855f7', 0.8)
]
},
{
label: 'Refferal',
data: [24, 21, 35, 34, 23, 24, 15],
backgroundColor: [
hexToRGBA( '#a855f7', 0.6)
]
},
{
label: 'Social',
data: [9, 7, 12, 14, 18, 8, 9],
backgroundColor: [
hexToRGBA( '#a855f7', 0.4)
]
},
{
label: 'Others',
data: [30, 31, 35, 34, 33, 34, 35],
backgroundColor: [
hexToRGBA( '#a855f7', 0.2)
]
}]
},
options: {
animation: {
delay: 2000,
},
plugins: {
legend: {
display: false,
}
},
responsive: true,
scales: {
x: {
stacked: true,
display: true,
grid: {
display: false
}
},
y: {
stacked: true,
grid: {
display: false
}
}
}
}
})
}
</script>
Chart Bar Split
<div class="relative">
<canvas class="w-full min-h-48" id="ChartBarSplit"></canvas>
</div>
<script>
// Chart Bar Split
const chart_Operating = document.getElementById("ChartBarSplit");
if ( chart_Operating != null) {
const ctbs = chart_Operating.getContext('2d');
const OpChart = new Chart(ctbs, {
type: 'bar',
data: {
labels: [
'Nov','Dec','Jan','Feb','Mar','Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct',
],
datasets: [{
type: 'bar',
label: 'Sales',
data: [280, 200, 255, 380, 198, -180, -298, 180, 298, 280, -198, 200],
fill: false,
backgroundColor: [
'#a855f7',
'#a855f7',
'#a855f7',
'#a855f7',
'#a855f7',
'#14b8a6',
'#14b8a6',
'#a855f7',
'#a855f7',
'#a855f7',
'#14b8a6',
'#a855f7'
],
borderColor: [
'#a855f7',
'#a855f7',
'#a855f7',
'#a855f7',
'#a855f7',
'#14b8a6',
'#14b8a6',
'#a855f7',
'#a855f7',
'#a855f7',
'#14b8a6',
'#a855f7'
],
barPercentage: 0.4,
borderWidth: 0,
tooltip: {
callbacks: {
label: (Item) => (Item.formattedValue) + '$'
}
}
}]
},
options: {
animation: {
delay: 2000
},
scales: {
x: {
grid: {
display: false
}
},
y: {
beginAtZero: true,
min: -500,
max: 500,
grid: {
display: false
},
ticks: {
// Include % in the ticks
callback: function(value, index, ticks) {
return value + '$';
}
}
}
},
plugins: {
legend: {
display: false
}
}
}
})
}
</script>
Chart Bar Split Horizontal
<div class="relative">
<canvas class="w-full min-h-48" id="ChartBarSplitHorizontal"></canvas>
</div>
<script>
// Chart Bar Split Horizontal
const chart_Growth = document.getElementById("ChartBarSplitHorizontal");
if ( chart_Growth != null) {
const ctbh = chart_Growth.getContext('2d');
const growChart = new Chart(ctbh, {
type: 'bar',
data: {
labels: [
'Nov','Dec','Jan','Feb','Mar','Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct',
],
datasets: [{
type: 'bar',
label: 'Growth',
data: [4, -12, 9, 2, -4, -7, -9, -11, 12, 8, 6, 4],
fill: false,
backgroundColor: [
'#a855f7',
'#14b8a6',
'#a855f7',
'#a855f7',
'#14b8a6',
'#14b8a6',
'#14b8a6',
'#14b8a6',
'#a855f7',
'#a855f7',
'#a855f7',
'#a855f7'
],
borderColor: [
'#a855f7',
'#14b8a6',
'#a855f7',
'#a855f7',
'#14b8a6',
'#14b8a6',
'#14b8a6',
'#14b8a6',
'#a855f7',
'#a855f7',
'#a855f7',
'#a855f7'
],
barPercentage: 0.4,
borderWidth: 0,
tooltip: {
callbacks: {
label: (Item) => (Item.formattedValue) + '%'
}
}
}]
},
options: {
indexAxis: 'y',
animation: {
delay: 2000
},
scales: {
y: {
grid: {
display: false
}
},
x: {
beginAtZero: true,
min: -15,
max: 15,
grid: {
display: false
},
ticks: {
// Include % in the ticks
callback: function(value, index, ticks) {
return value + '%';
}
}
}
},
plugins: {
legend: {
display: false
}
}
}
})
}
</script>
Chart Line
<div class="relative">
<canvas class="w-full min-h-48" id="ChartLine"></canvas>
</div>
<script>
// Convert HEX TO RGBA
function hexToRGBA(hex, opacity) {
if (hex != null) {
return 'rgba(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16) }).concat(isFinite(opacity) ? opacity : 1).join(',') + ')';
}
}
// Chart Line
const chart_salestargets = document.getElementById("ChartLine");
if ( chart_salestargets != null) {
const ctbcl = chart_salestargets.getContext('2d');
const FinChart = new Chart(ctbcl, {
type: 'line',
data: {
labels: [
'Nov','Dec','Jan','Feb','Mar','Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct',
],
datasets: [{
label: 'Target Sales',
data: [64080,63080,72080,87080,85080,85080,83080,81080,85080,85080,85080,88080],
backgroundColor: [
hexToRGBA( '#14b8a6', 0.8),
],
fill: false,
borderColor: '#14b8a6',
borderDash: [3, 3],
tension: 0.1,
cubicInterpolationMode: 'monotone',
pointBackgroundColor: '#14b8a6',
tooltip: {
callbacks: {
label: (Item) => (Item.formattedValue) + '$ Target'
}
}
},
{
label: 'Sales',
data: [61080, 61100, 72055, 84380, 83598, 87680, 77798, 70680, 85798, 92680, 95798, 98000],
fill: {
target: 'origin'
},
borderColor: '#a855f7',
backgroundColor: hexToRGBA( '#a855f7', 0.1),
tension: 0.3,
pointBackgroundColor: '#a855f7',
pointBorderWidth: 0,
pointHitRadius: 30,
pointHoverBackgroundColor: '#a855f7',
pointHoverRadius: 5,
pointRadius: 0,
tooltip: {
callbacks: {
label: (Item) => (Item.formattedValue) + '$ Sales'
}
}
}]
},
options: {
interaction: {
mode: 'index',
intersect: false,
},
animation: {
delay: 2000
},
scales: {
y: {
beginAtZero: true,
min: 0,
max: 120000,
grid: {
display: false
},
ticks: {
// Include % in the ticks
callback: function(value, index, ticks) {
return value + '$';
}
}
},
x: {
grid: {
display: false
}
}
},
plugins: {
legend: {
display: false
}
}
}
})
}
</script>
Chart Line Interpolation
<div class="relative">
<canvas class="w-full min-h-48" id="ChartInterpolation"></canvas>
</div>
<script>
// Chart Interpolation
const ctxLine = document.getElementById('ChartInterpolation');
if (ctxLine != null) {
const lineData = {
labels: ['1 May', '2 May', '3 May', '4 May', '5 May', '6 May', '7 May', '8 May', '9 May', '10 May', '11 May', '12 May', '13 May', '14 May'],
datasets: [
{
label: 'Sessions',
data: [200, 220, 225, 240, 210, 230, 220, 250, 255, 260, 230, 270, 240, 280],
borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
yAxisID: 'ySessions',
tension: 0.4
},
{
label: 'Duration (mins)',
data: [5, 6, 4, 7, 5, 6, 5.5, 7.2, 5.1, 6.4, 6, 6.5, 6.3, 7],
borderColor: 'rgba(153, 102, 255, 1)',
backgroundColor: 'rgba(153, 102, 255, 0.2)',
yAxisID: 'yDuration',
tension: 0.4
}
]
};
const lineConfig = {
type: 'line',
data: lineData,
options: {
plugins: {
legend: { display: true, position: "bottom" }
},
scales: {
x: { grid: { display: false } },
ySessions: {
grid: { display: false },
type: 'linear',
position: 'left',
ticks: { beginAtZero: true }
},
yDuration: {
grid: { display: false },
type: 'linear',
position: 'right',
ticks: { beginAtZero: true }
}
},
responsive: true,
maintainAspectRatio: false
}
};
const LineChart = new Chart(ctxLine.getContext('2d'), lineConfig);
}
</script>
Chart Line Area
<div class="relative">
<canvas class="w-full min-h-48" id="ChartLineArea"></canvas>
</div>
<script>
// Chart Line Area
const ctxLineArea = document.getElementById('ChartLineArea');
if (ctxLineArea != null) {
const gradientBackground = ctxLineArea.getContext('2d').createLinearGradient(0, 0, 0, 200);
gradientBackground.addColorStop(0, 'rgba(54, 162, 235, 0.5)');
gradientBackground.addColorStop(1, 'rgba(54, 162, 235, 0.01)');
const lineArea = {
labels: ['1 May', '2 May', '3 May', '4 May', '5 May', '6 May', '7 May', '8 May', '9 May', '10 May', '11 May', '12 May', '13 May', '14 May'],
datasets: [{
label: 'Pageviews',
data: [500, 700, 620, 780, 900, 800, 950, 1100, 850, 920, 880, 980, 1020, 1150],
backgroundColor: gradientBackground,
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 2,
fill: true,
tension: 0.4
}]
};
const lineConfigArea = {
type: 'line',
data: lineArea,
options: {
plugins: { legend: { display: false } },
scales: {
y: {
grid: { display: false },
beginAtZero: true
},
x: { grid: { display: false } }
},
responsive: true,
maintainAspectRatio: false,
animation: { duration: 300 },
elements: { line: { borderWidth: 2 } }
}
};
const BarChart = new Chart(ctxLineArea.getContext('2d'), lineConfigArea);
}
</script>
Chart Line Thin
<div class="relative">
<canvas class="w-full min-h-48" id="ChartLineThin"></canvas>
</div>
<script>
// Chart Line Thin
const chart_user = document.getElementById("ChartLineThin");
if ( chart_user != null) {
const ctl = chart_user.getContext('2d');
const UserChart = new Chart(ctl, {
type: 'line',
data: {
labels: ['1', '2', '3', '4', '5', '6', '7'],
datasets: [{
label: 'Daily',
data: [70, 121, 135, 105, 76, 150, 195],
fill: false,
borderColor: '#14b8a6',
borderWidth: 1,
radius: 0,
tension: 0.1
},
{
label: 'Weekly',
data: [471, 521, 635, 534, 483, 504, 875],
fill: false,
borderColor: '#a855f7',
borderWidth: 1,
radius: 0,
tension: 0.1
},
{
label: 'Monthly',
data: [1689, 1986, 2175, 1921, 1631, 2032, 2683],
fill: false,
borderColor: '#22c55e',
borderWidth: 1,
radius: 0,
tension: 0.1
}]
},
options: {
animation: {
y: {
duration: 4000,
from: 500
}
},
responsive: true,
plugins: {
legend: {
display: false,
}
},
interaction: {
mode: 'index',
intersect: false,
},
scales: {
x: {
display: true,
grid: {
lineWidth: 0.5
},
title: {
display: true,
text: 'August'
}
},
y: {
display: true,
grid: {
display: false,
},
Min: -10,
Max: 200
}
}
}
})
}
</script>
Small Charts
<div class="relative">
<canvas class="w-full min-h-48" id="LineAreaSm"></canvas>
</div>
<div class="relative">
<canvas class="w-full min-h-48" id="ChartBarSm"></canvas>
</div>
<script>
// Chart line Area
const ctxn = document.getElementById('LineAreaSm').getContext('2d');
new Chart(ctxn, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], // Labels for X-axis
datasets: [{
data: [120, 251, 152, 334, 256, 358, 408], // Dummy data
borderColor: '#4F46E5', // Line color
borderWidth: 2,
fill: false, // No fill below the line
tension: 0.4 // Curve of the line
}]
},
options: {
plugins: {
tooltip: {
enabled: true // Enable tooltip
},
legend: {
display: false // Hide legend
}
},
scales: {
x: {
display: false // Hide X-axis
},
y: {
display: false // Hide Y-axis
}
},
elements: {
point: {
radius: 0 // Hide data points
}
},
responsive: true,
maintainAspectRatio: false
}
});
// Chart Bar Sm
const newCustomersChartCtx = document.getElementById('ChartBarSm').getContext('2d');
new Chart(newCustomersChartCtx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
datasets: [{
data: [30, 50, 70, 60, 80, 100, 90, 102, 120, 110],
backgroundColor: '#34D399',
borderRadius: 0
}]
},
options: {
plugins: {
legend: { display: false },
tooltip: { enabled: true }
},
scales: {
x: { display: false },
y: { display: false }
},
responsive: true,
maintainAspectRatio: false
}
});
</script>
Chart Mixed
<div class="relative">
<canvas class="w-full min-h-48" id="ChartMixed"></canvas>
</div>
<script>
// Convert HEX TO RGBA
function hexToRGBA(hex, opacity) {
if (hex != null) {
return 'rgba(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16) }).concat(isFinite(opacity) ? opacity : 1).join(',') + ')';
}
}
// Chart Mixed
const chart_mixed = document.getElementById("ChartMixed");
if ( chart_mixed != null) {
const ctbm = chart_mixed.getContext('2d');
const FinChart = new Chart(ctbm, {
type: 'scatter',
data: {
labels: [
'Nov','Dec','Jan','Feb','Mar','Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct',
],
datasets: [{
type: 'line',
label: 'Target Sales',
data: [64080,63080,72080,87080,85080,85080,83080,81080,85080,85080,85080,88080],
backgroundColor: [
hexToRGBA( '#6366f1', 0.8),
],
borderColor: hexToRGBA( '#6366f1', 0.8),
borderDash: [4, 4],
tooltip: {
callbacks: {
label: (Item) => (Item.formattedValue) + '$ Target'
}
}
},
{
type: 'bar',
label: 'Sales',
data: [76080, 62900, 82055, 94380, 93598, 84980, 77798, 70680, 84798, 92680, 95798, 98000],
fill: false,
backgroundColor: [
'#a855f7',
'#eab308',
'#a855f7',
'#a855f7',
'#a855f7',
'#eab308',
'#ec4899',
'#ec4899',
'#eab308',
'#a855f7',
'#a855f7',
'#a855f7'
],
borderColor: [
'#a855f7',
'#eab308',
'#a855f7',
'#a855f7',
'#a855f7',
'#eab308',
'#ec4899',
'#ec4899',
'#eab308',
'#a855f7',
'#a855f7',
'#a855f7'
],
barPercentage: 0.4,
borderWidth: 0,
tooltip: {
callbacks: {
label: (Item) => (Item.formattedValue) + '$ Sales'
}
}
}]
},
options: {
interaction: {
mode: 'index',
intersect: false,
},
animation: {
delay: 2000
},
scales: {
y: {
beginAtZero: true,
min: 0,
max: 120000,
grid: {
borderDash: [4, 4]
},
ticks: {
// Include % in the ticks
callback: function(value, index, ticks) {
return value + '$';
}
}
}
},
plugins: {
legend: {
display: false
}
}
}
})
}
</script>
Gauge Chart
<div class="relative">
<canvas id="GaugeChart" class="w-full min-h-48"></canvas>
</div>
<script>
// Gauge Chart
const chart_gauge = document.getElementById("GaugeChart");
if ( chart_gauge != null) {
const ctdn = chart_gauge.getContext('2d');
const GaugeChart = new Chart(ctdn, {
type: "doughnut",
data: {
labels: ["Published", "Draft"],
datasets: [{
data: [320, 80],
backgroundColor: [
'#a855f7',
'#14b8a6'
],
borderColor: [
'#a855f7',
'#14b8a6'
],
borderWidth: 1
}]
},
options: {
cutout: '80%',
rotation: 180,
circumference: 180,
rotation: -90,
animation: {
delay: 2000
},
plugins: {
legend: {
display: false,
}
}
}
})
}
</script>
Chart Doughnut
<div class="relative">
<canvas class="w-full min-h-48" id="ChartDoughnut"></canvas>
</div>
<script>
// Chart doughnut
const categoryChartElement = document.getElementById("ChartDoughnut");
if (categoryChartElement) {
const categoryCtx = categoryChartElement.getContext("2d");
const categoryChart = new Chart(categoryCtx, {
type: "doughnut",
data: {
labels: [
"Web Development",
"Mobile Apps",
"Design Apps",
"Other Projects",
],
datasets: [
{
data: [35, 25, 20, 20],
backgroundColor: ["#a855f7", "#ec4899", "#eab308", "#22c55e"],
borderWidth: 0,
},
],
},
options: {
cutout: '70%',
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
},
},
});
}
</script>
Chart Pie
<div class="relative">
<canvas class="w-full min-h-48" id="ChartPie"></canvas>
</div>
<script>
// Chart Pie
const employeePieChartElement = document.getElementById("ChartPie");
if (employeePieChartElement) {
const ctxu = employeePieChartElement.getContext("2d");
new Chart(ctxu, {
type: "pie",
data: {
labels: ["Full-time", "Part-time", "Contract", "Intern", "Freelance"],
datasets: [
{
data: [450, 300, 150, 50, 50],
backgroundColor: ["#4ade80", "#facc15", "#c084fc", "#ec4899", "#22d3ee"],
hoverBackgroundColor: ["#4ade80", "#facc15", "#c084fc", "#ec4899", "#22d3ee"],
borderWidth: 0,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: { legend: { display: false } },
},
});
}
</script>
All demo chart config is available, dont forget to add <script src="../vendors/chart.js/dist/chart.umd.js"></script> before chart config. Please read more documentaion about chart in https://www.chartjs.org/