ChartJS is simple yet flexible JavaScript charting library for designers & developers.
Please refer ChartJS Documentation for a full list of instructions and other options.
config.js file to set JavaScript global variables (colors) which are used in charts. Read more
Include the following vendors script in the "Vendors JS" area from the page's footer:
<script src="assets/vendor/libs/chartjs/chartjs.js"><script><div class="card">
<div class="card-header header-elements p-3 my-n1">
<h5 class="card-title mb-0 pl-0 pl-sm-2 p-2">Latest Statistics</h5>
<div class="card-action-element ms-auto py-0">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle p-0" data-bs-toggle="dropdown" aria-expanded="false"><i class="bx bx-calendar"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
<li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
<li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
<li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
<li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
</ul>
</div>
</div>
</div>
<div class="card-body">
<canvas id="barChart" class="chartjs" data-height="400"></canvas>
</div>
</div>// Color Variableslet cardColor, headingColor, labelColor, borderColor, legendColor;
if (isDarkStyle) {
cardColor = config.colors_dark.cardColor;
headingColor = config.colors_dark.headingColor;
labelColor = config.colors_dark.textMuted;
legendColor = config.colors_dark.bodyColor;
borderColor = config.colors_dark.borderColor;
} else {
cardColor = config.colors.cardColor;
headingColor = config.colors.headingColor;
labelColor = config.colors.textMuted;
legendColor = config.colors.bodyColor;
borderColor = config.colors.borderColor;
}
const barChart = document.getElementById('barChart');
if (barChart) {
const barChartVar = new Chart(barChart, {
type: 'bar',
data: {
labels: [
'7/12',
'8/12',
'9/12',
'10/12',
'11/12',
'12/12',
'13/12',
'14/12',
'15/12',
'16/12',
'17/12',
'18/12',
'19/12'
],
datasets: [
{
data: [275, 90, 190, 205, 125, 85, 55, 87, 127, 150, 230, 280, 190],
backgroundColor: cyanColor,
borderColor: 'transparent',
maxBarThickness: 15,
borderRadius: {
topRight: 15,
topLeft: 15
}
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
animation: {
duration: 500
},
plugins: {
tooltip: {
rtl: isRtl,
backgroundColor: cardColor,
titleColor: headingColor,
bodyColor: legendColor,
borderWidth: 1,
borderColor: borderColor
},
legend: {
display: false
}
},
scales: {
x: {
grid: {
color: borderColor,
drawBorder: false,
borderColor: borderColor
},
ticks: {
color: labelColor
}
},
y: {
min: 0,
max: 400,
grid: {
color: borderColor,
drawBorder: false,
borderColor: borderColor
},
ticks: {
stepSize: 100,
color: labelColor
}
}
}
}
});
}Balance
<div class="card">
<div class="card-header header-elements">
<div class="ps-0 ps-sm-2 d-flex flex-column mb-2 mb-sm-0">
<p class="card-subtitle text-muted mb-1">Balance</p>
<h5 class="card-title mb-0">$74,123</h5>
</div>
<div class="card-action-element ms-auto py-0">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle p-0" data-bs-toggle="dropdown" aria-expanded="false"><i class="bx bx-calendar"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
<li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
<li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
<li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
<li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
</ul>
</div>
</div>
</div>
<div class="card-body">
<canvas id="horizontalBarChart" class="chartjs" data-height="400"></canvas>
</div>
</div>// Color Variables
let cardColor, headingColor, labelColor, borderColor, legendColor;
if (isDarkStyle) {
cardColor = config.colors_dark.cardColor;
headingColor = config.colors_dark.headingColor;
labelColor = config.colors_dark.textMuted;
legendColor = config.colors_dark.bodyColor;
borderColor = config.colors_dark.borderColor;
} else {
cardColor = config.colors.cardColor;
headingColor = config.colors.headingColor;
labelColor = config.colors.textMuted;
legendColor = config.colors.bodyColor;
borderColor = config.colors.borderColor;
}
const horizontalBarChart = document.getElementById('horizontalBarChart');
if (horizontalBarChart) {
const horizontalBarChartVar = new Chart(horizontalBarChart, {
type: 'bar',
data: {
labels: ['MON', 'TUE', 'WED ', 'THU', 'FRI', 'SAT', 'SUN'],
datasets: [
{
data: [710, 350, 470, 580, 230, 460, 120],
backgroundColor: config.colors.info,
borderColor: 'transparent',
maxBarThickness: 15
}
]
},
options: {
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
animation: {
duration: 500
},
elements: {
bar: {
borderRadius: {
topRight: 15,
bottomRight: 15
}
}
},
plugins: {
tooltip: {
rtl: isRtl,
backgroundColor: cardColor,
titleColor: headingColor,
bodyColor: legendColor,
borderWidth: 1,
borderColor: borderColor
},
legend: {
display: false
}
},
scales: {
x: {
min: 0,
grid: {
color: borderColor,
borderColor: borderColor
},
ticks: {
color: labelColor
}
},
y: {
grid: {
borderColor: borderColor,
display: false,
drawBorder: false
},
ticks: {
color: labelColor
}
}
}
}
});
}<div class="card">
<div class="card-header header-elements">
<div>
<h5 class="card-title mb-0">Statistics</h5>
<small class="text-muted">Commercial networks and enterprises</small>
</div>
<div class="card-header-elements ms-auto py-0">
<h5 class="mb-0 me-3">$ 78,000</h5>
<span class="badge bg-label-secondary">
<i class='bx bx-up-arrow-alt bx-xs text-success'></i>
<span class="align-middle">37%</span>
</span>
</div>
</div>
<div class="card-body">
<canvas id="lineChart" class="chartjs" data-height="500"></canvas>
</div>
</div>// Color Variables
const yellowColor = '#ffe800'5
let borderColor, gridColor, tickColor;
if (isDarkStyle) {
borderColor = 'rgba(100, 100, 100, 1)';
gridColor = 'rgba(100, 100, 100, 1)';
tickColor = 'rgba(255, 255, 255, 0.75)'; // x & y axis tick color
} else {
borderColor = '#f0f0f0';
gridColor = '#f0f0f0';
tickColor = 'rgba(0, 0, 0, 0.75)'; // x & y axis tick color
}
const lineChart = document.getElementById('lineChart');
if (lineChart) {
const lineChartVar = new Chart(lineChart, {
type: 'line',
data: {
labels: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140],
datasets: [
{
data: [80, 150, 180, 270, 210, 160, 160, 202, 265, 210, 270, 255, 290, 360, 375],
label: 'Europe',
borderColor: config.colors.danger,
tension: 0.5,
pointStyle: 'circle',
backgroundColor: config.colors.danger,
fill: false,
pointRadius: 1,
pointHoverRadius: 5,
pointHoverBorderWidth: 5,
pointBorderColor: 'transparent',
pointHoverBorderColor: cardColor,
pointHoverBackgroundColor: config.colors.danger
},
{
data: [80, 125, 105, 130, 215, 195, 140, 160, 230, 300, 220, 170, 210, 200, 280],
label: 'Asia',
borderColor: config.colors.primary,
tension: 0.5,
pointStyle: 'circle',
backgroundColor: config.colors.primary,
fill: false,
pointRadius: 1,
pointHoverRadius: 5,
pointHoverBorderWidth: 5,
pointBorderColor: 'transparent',
pointHoverBorderColor: cardColor,
pointHoverBackgroundColor: config.colors.primary
},
{
data: [80, 99, 82, 90, 115, 115, 74, 75, 130, 155, 125, 90, 140, 130, 180],
label: 'Africa',
borderColor: yellowColor,
tension: 0.5,
pointStyle: 'circle',
backgroundColor: yellowColor,
fill: false,
pointRadius: 1,
pointHoverRadius: 5,
pointHoverBorderWidth: 5,
pointBorderColor: 'transparent',
pointHoverBorderColor: cardColor,
pointHoverBackgroundColor: yellowColor
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
grid: {
color: borderColor,
drawBorder: false,
borderColor: borderColor
},
ticks: {
color: labelColor
}
},
y: {
scaleLabel: {
display: true
},
min: 0,
max: 400,
ticks: {
color: labelColor,
stepSize: 100
},
grid: {
color: borderColor,
drawBorder: false,
borderColor: borderColor
}
}
},
plugins: {
tooltip: {
// Updated default tooltip UI
rtl: isRtl,
backgroundColor: cardColor,
titleColor: headingColor,
bodyColor: legendColor,
borderWidth: 1,
borderColor: borderColor
},
legend: {
position: 'top',
align: 'start',
rtl: isRtl,
labels: {
usePointStyle: true,
padding: 35,
boxWidth: 6,
boxHeight: 6,
color: legendColor
}
}
}
}
});
}<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Radar Chart</h5>
</div>
<div class="card-body">
<canvas class="chartjs" id="radarChart" data-height="355"></canvas>
</div>
</div>// Color Variables
let cardColor, headingColor, labelColor, borderColor, legendColor;
if (isDarkStyle) {
cardColor = config.colors_dark.cardColor;
headingColor = config.colors_dark.headingColor;
labelColor = config.colors_dark.textMuted;
legendColor = config.colors_dark.bodyColor;
borderColor = config.colors_dark.borderColor;
} else {
cardColor = config.colors.cardColor;
headingColor = config.colors.headingColor;
labelColor = config.colors.textMuted;
legendColor = config.colors.bodyColor;
borderColor = config.colors.borderColor;
}
const radarChart = document.getElementById('radarChart');
if (radarChart) {
// For radar gradient color
const gradientBlue = radarChart.getContext('2d').createLinearGradient(0, 0, 0, 150);
gradientBlue.addColorStop(0, 'rgba(85, 85, 255, 0.9)');
gradientBlue.addColorStop(1, 'rgba(151, 135, 255, 0.8)');
const gradientRed = radarChart.getContext('2d').createLinearGradient(0, 0, 0, 150);
gradientRed.addColorStop(0, 'rgba(255, 85, 184, 0.9)');
gradientRed.addColorStop(1, 'rgba(255, 135, 135, 0.8)');
const radarChartVar = new Chart(radarChart, {
type: 'radar',
data: {
labels: ['STA', 'STR', 'AGI', 'VIT', 'CHA', 'INT'],
datasets: [
{
label: 'Donté Panlin',
data: [25, 59, 90, 81, 60, 82],
fill: true,
pointStyle: 'dash',
backgroundColor: gradientRed,
borderColor: 'transparent',
pointBorderColor: 'transparent'
},
{
label: 'Mireska Sunbreeze',
data: [40, 100, 40, 90, 40, 90],
fill: true,
pointStyle: 'dash',
backgroundColor: gradientBlue,
borderColor: 'transparent',
pointBorderColor: 'transparent'
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
animation: {
duration: 500
},
scales: {
r: {
ticks: {
maxTicksLimit: 1,
display: false,
color: labelColor
},
grid: {
color: borderColor
},
angleLines: { color: borderColor },
pointLabels: {
color: labelColor
}
}
},
plugins: {
legend: {
rtl: isRtl,
position: 'top',
labels: {
padding: 25,
color: legendColor
}
},
tooltip: {
// Updated default tooltip UI
rtl: isRtl,
backgroundColor: cardColor,
titleColor: headingColor,
bodyColor: legendColor,
borderWidth: 1,
borderColor: borderColor
}
}
}
});
}<div class="card">
<div class="card-header header-elements">
<h5 class="card-title mb-0">Average Skills</h5>
<div class="card-header-elements ms-auto py-0 dropdown">
<button type="button" class="btn dropdown-toggle hide-arrow p-0" id="heat-chart-dd" data-bs-toggle="dropdown" aria-expanded="false"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="heat-chart-dd">
<a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a>
<a class="dropdown-item" href="javascript:void(0);">Last Month</a>
<a class="dropdown-item" href="javascript:void(0);">Last Year</a>
</div>
</div>
</div>
<div class="card-body">
<canvas id="polarChart" class="chartjs" data-height="337"></canvas>
</div>
</div>// Color Variables
const purpleColor = '#836AF9',
yellowColor = '#ffe800',
cyanColor = '#28dac6',
orangeColor = '#FF8132',
oceanBlueColor = '#299AFF',
greyColor = '#4F5D70';
let cardColor, headingColor, labelColor, borderColor, legendColor;
if (isDarkStyle) {
cardColor = config.colors_dark.cardColor;
headingColor = config.colors_dark.headingColor;
labelColor = config.colors_dark.textMuted;
legendColor = config.colors_dark.bodyColor;
borderColor = config.colors_dark.borderColor;
} else {
cardColor = config.colors.cardColor;
headingColor = config.colors.headingColor;
labelColor = config.colors.textMuted;
legendColor = config.colors.bodyColor;
borderColor = config.colors.borderColor;
}
const polarChart = document.getElementById('polarChart');
if (polarChart) {
const polarChartVar = new Chart(polarChart, {
type: 'polarArea',
data: {
labels: ['Africa', 'Asia', 'Europe', 'America', 'Antarctica', 'Australia'],
datasets: [
{
label: 'Population (millions)',
backgroundColor: [purpleColor, yellowColor, orangeColor, oceanBlueColor, greyColor, cyanColor],
data: [19, 17.5, 15, 13.5, 11, 9],
borderWidth: 0
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
animation: {
duration: 500
},
scales: {
r: {
ticks: {
display: false,
color: labelColor
},
grid: {
display: false
}
}
},
plugins: {
tooltip: {
// Updated default tooltip UI
rtl: isRtl,
backgroundColor: cardColor,
titleColor: headingColor,
bodyColor: legendColor,
borderWidth: 1,
borderColor: borderColor
},
legend: {
rtl: isRtl,
position: 'right',
labels: {
usePointStyle: true,
padding: 25,
boxWidth: 8,
boxHeight: 8,
color: legendColor
}
}
}
}
});
}<div class="card">
<div class="card-header header-elements">
<h5 class="card-title mb-0">Bubble Chart</h5>
<div class="card-header-elements ms-auto py-0">
<h5 class="mb-0 me-3">$ 100,000</h5>
<span class="badge bg-label-secondary">
<i class='bx bx-down-arrow-alt bx-xs text-danger'></i>
<span class="align-middle">20%</span>
</span>
</div>
</div>
<div class="card-body">
<canvas id="bubbleChart" class="chartjs" data-height="500"></canvas>
</div>
</div>// Color Variables
const purpleColor = '#836AF9',
yellowColor = '#ffe800';
let cardColor, headingColor, labelColor, borderColor, legendColor;
if (isDarkStyle) {
cardColor = config.colors_dark.cardColor;
headingColor = config.colors_dark.headingColor;
labelColor = config.colors_dark.textMuted;
legendColor = config.colors_dark.bodyColor;
borderColor = config.colors_dark.borderColor;
} else {
cardColor = config.colors.cardColor;
headingColor = config.colors.headingColor;
labelColor = config.colors.textMuted;
legendColor = config.colors.bodyColor;
borderColor = config.colors.borderColor;
}
const bubbleChart = document.getElementById('bubbleChart');
if (bubbleChart) {
const bubbleChartVar = new Chart(bubbleChart, {
type: 'bubble',
data: {
animation: {
duration: 10000
},
datasets: [
{
label: 'Dataset 1',
backgroundColor: purpleColor,
borderColor: purpleColor,
data: [
{
x: 20,
y: 74,
r: 10
},
{
x: 10,
y: 110,
r: 5
},
{
x: 30,
y: 165,
r: 7
},
{
x: 40,
y: 200,
r: 20
},
{
x: 90,
y: 185,
r: 7
},
{
x: 50,
y: 240,
r: 7
},
{
x: 60,
y: 275,
r: 10
},
{
x: 70,
y: 305,
r: 5
},
{
x: 80,
y: 325,
r: 4
},
{
x: 100,
y: 310,
r: 5
},
{
x: 110,
y: 240,
r: 5
},
{
x: 120,
y: 270,
r: 7
},
{
x: 130,
y: 300,
r: 6
}
]
},
{
label: 'Dataset 2',
backgroundColor: yellowColor,
borderColor: yellowColor,
data: [
{
x: 30,
y: 72,
r: 5
},
{
x: 40,
y: 110,
r: 7
},
{
x: 20,
y: 135,
r: 6
},
{
x: 10,
y: 160,
r: 12
},
{
x: 50,
y: 285,
r: 5
},
{
x: 60,
y: 235,
r: 5
},
{
x: 70,
y: 275,
r: 7
},
{
x: 80,
y: 290,
r: 4
},
{
x: 90,
y: 250,
r: 10
},
{
x: 100,
y: 220,
r: 7
},
{
x: 120,
y: 230,
r: 4
},
{
x: 110,
y: 320,
r: 15
},
{
x: 130,
y: 330,
r: 7
}
]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
min: 0,
max: 140,
grid: {
color: borderColor,
drawBorder: false,
borderColor: borderColor
},
ticks: {
stepSize: 10,
color: labelColor
}
},
y: {
min: 0,
max: 400,
grid: {
color: borderColor,
drawBorder: false,
borderColor: borderColor
},
ticks: {
stepSize: 100,
color: labelColor
}
}
},
plugins: {
legend: {
display: false
},
tooltip: {
// Updated default tooltip UI
rtl: isRtl,
backgroundColor: cardColor,
titleColor: headingColor,
bodyColor: legendColor,
borderWidth: 1,
borderColor: borderColor
}
}
}
});
}<div class="card">
<h5 class="card-header">User by Devices</h5>
<div class="card-body">
<canvas id="doughnutChart" class="chartjs" data-height="350"></canvas>
<ul class="doughnut-legend d-flex justify-content-around ps-0 mb-2 mt-4 pt-1">
<li class="ct-series-0 d-flex flex-column">
<h5 class="mb-0">Desktop</h5>
<span class="badge badge-dot my-2 cursor-pointer rounded-pill" style="background-color: rgb(102, 110, 232);width:35px; height:6px;"></span>
<div class="text-muted">80 %</div>
</li>
<li class="ct-series-1 d-flex flex-column">
<h5 class="mb-0">Tablet</h5>
<span class="badge badge-dot my-2 cursor-pointer rounded-pill" style="background-color: rgb(40, 208, 148);width:35px; height:6px;"></span>
<div class="text-muted">10 %</div>
</li>
<li class="ct-series-2 d-flex flex-column">
<h5 class="mb-0">Mobile</h5>
<span class="badge badge-dot my-2 cursor-pointer rounded-pill" style="background-color: rgb(253, 172, 52);width:35px; height:6px;"></span>
<div class="text-muted">10 %</div>
</li>
</ul>
</div>
</div>// Color Variables
const cyanColor = '#28dac6',
orangeLightColor = '#FDAC34';
let cardColor, headingColor, labelColor, borderColor, legendColor;
if (isDarkStyle) {
cardColor = config.colors_dark.cardColor;
headingColor = config.colors_dark.headingColor;
labelColor = config.colors_dark.textMuted;
legendColor = config.colors_dark.bodyColor;
borderColor = config.colors_dark.borderColor;
} else {
cardColor = config.colors.cardColor;
headingColor = config.colors.headingColor;
labelColor = config.colors.textMuted;
legendColor = config.colors.bodyColor;
borderColor = config.colors.borderColor;
}
const doughnutChart = document.getElementById('doughnutChart');
if (doughnutChart) {
const doughnutChartVar = new Chart(doughnutChart, {
type: 'doughnut',
data: {
labels: ['Tablet', 'Mobile', 'Desktop'],
datasets: [
{
data: [10, 10, 80],
backgroundColor: [cyanColor, orangeLightColor, config.colors.primary],
borderWidth: 0,
pointStyle: 'rectRounded'
}
]
},
options: {
responsive: true,
animation: {
duration: 500
},
cutout: '68%',
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
label: function (context) {
const label = context.labels || '',
value = context.parsed;
const output = ' ' + label + ' : ' + value + ' %';
return output;
}
},
// Updated default tooltip UI
rtl: isRtl,
backgroundColor: cardColor,
titleColor: headingColor,
bodyColor: legendColor,
borderWidth: 1,
borderColor: borderColor
}
}
}
});
}<div class="card">
<div class="card-header flex-nowrap header-elements">
<h5 class="card-title mb-0">New Product Data</h5>
<div class="card-header-elements ms-auto py-0 d-none d-sm-block">
<div class="btn-group" role="group" aria-label="radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="dailyRadio" checked>
<label class="btn btn-outline-secondary" for="dailyRadio">Daily</label>
<input type="radio" class="btn-check" name="btnradio" id="monthlyRadio">
<label class="btn btn-outline-secondary" for="monthlyRadio">Monthly</label>
<input type="radio" class="btn-check" name="btnradio" id="yearlyRadio">
<label class="btn btn-outline-secondary" for="yearlyRadio">Yearly</label>
</div>
</div>
</div>
<div class="card-body">
<canvas id="scatterChart" class="chartjs" data-height="435"></canvas>
</div>
</div>// Color Variables
const yellowColor = '#ffe800',
cyanColor = '#28dac6';
let cardColor, headingColor, labelColor, borderColor, legendColor;
if (isDarkStyle) {
cardColor = config.colors_dark.cardColor;
headingColor = config.colors_dark.headingColor;
labelColor = config.colors_dark.textMuted;
legendColor = config.colors_dark.bodyColor;
borderColor = config.colors_dark.borderColor;
} else {
cardColor = config.colors.cardColor;
headingColor = config.colors.headingColor;
labelColor = config.colors.textMuted;
legendColor = config.colors.bodyColor;
borderColor = config.colors.borderColor;
}
const scatterChart = document.getElementById('scatterChart');
if (scatterChart) {
const scatterChartVar = new Chart(scatterChart, {
type: 'scatter',
data: {
datasets: [
{
label: 'iPhone',
data: [
{
x: 72,
y: 225
},
{
x: 81,
y: 270
},
{
x: 90,
y: 230
},
{
x: 103,
y: 305
},
{
x: 103,
y: 245
},
{
x: 108,
y: 275
},
{
x: 110,
y: 290
},
{
x: 111,
y: 315
},
{
x: 109,
y: 350
},
{
x: 116,
y: 340
},
{
x: 113,
y: 260
},
{
x: 117,
y: 275
},
{
x: 117,
y: 295
},
{
x: 126,
y: 280
},
{
x: 127,
y: 340
},
{
x: 133,
y: 330
}
],
backgroundColor: config.colors.primary,
borderColor: 'transparent',
pointBorderWidth: 2,
pointHoverBorderWidth: 2,
pointRadius: 5
},
{
label: 'Samsung Note',
data: [
{
x: 13,
y: 95
},
{
x: 22,
y: 105
},
{
x: 17,
y: 115
},
{
x: 19,
y: 130
},
{
x: 21,
y: 125
},
{
x: 35,
y: 125
},
{
x: 13,
y: 155
},
{
x: 21,
y: 165
},
{
x: 25,
y: 155
},
{
x: 18,
y: 190
},
{
x: 26,
y: 180
},
{
x: 43,
y: 180
},
{
x: 53,
y: 202
},
{
x: 61,
y: 165
},
{
x: 67,
y: 225
}
],
backgroundColor: yellowColor,
borderColor: 'transparent',
pointRadius: 5
},
{
label: 'OnePlus',
data: [
{
x: 70,
y: 195
},
{
x: 72,
y: 270
},
{
x: 98,
y: 255
},
{
x: 100,
y: 215
},
{
x: 87,
y: 240
},
{
x: 94,
y: 280
},
{
x: 99,
y: 300
},
{
x: 102,
y: 290
},
{
x: 110,
y: 275
},
{
x: 111,
y: 250
},
{
x: 94,
y: 280
},
{
x: 92,
y: 340
},
{
x: 100,
y: 335
},
{
x: 108,
y: 330
}
],
backgroundColor: cyanColor,
borderColor: 'transparent',
pointBorderWidth: 2,
pointHoverBorderWidth: 2,
pointRadius: 5
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
animation: {
duration: 800
},
plugins: {
legend: {
position: 'top',
rtl: isRtl,
align: 'start',
labels: {
usePointStyle: true,
padding: 25,
boxWidth: 6,
boxHeight: 6,
color: legendColor
}
},
tooltip: {
// Updated default tooltip UI
rtl: isRtl,
backgroundColor: cardColor,
titleColor: headingColor,
bodyColor: legendColor,
borderWidth: 1,
borderColor: borderColor
}
},
scales: {
x: {
min: 0,
max: 140,
grid: {
color: borderColor,
drawTicks: false,
drawBorder: false,
borderColor: borderColor
},
ticks: {
stepSize: 10,
color: labelColor
}
},
y: {
min: 0,
max: 400,
grid: {
color: borderColor,
drawTicks: false,
drawBorder: false,
borderColor: borderColor
},
ticks: {
stepSize: 100,
color: labelColor
}
}
}
}
});
}<div class="card">
<div class="card-header header-elements">
<h5 class="card-title mb-0">Data Science</h5>
<div class="card-header-elements py-0 ms-auto">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle p-0" data-bs-toggle="dropdown" aria-expanded="false"><i class="bx bx-calendar"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
<li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
<li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
<li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
<li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
</ul>
</div>
</div>
</div>
<div class="card-body">
<canvas id="lineAreaChart" class="chartjs" data-height="450"></canvas>
</div>
</div>// Color Variables
const greyLightColor = '#EDF1F4',
blueColor = '#2B9AFF',
blueLightColor = '#84D0FF';
let cardColor, headingColor, labelColor, borderColor, legendColor;
if (isDarkStyle) {
cardColor = config.colors_dark.cardColor;
headingColor = config.colors_dark.headingColor;
labelColor = config.colors_dark.textMuted;
legendColor = config.colors_dark.bodyColor;
borderColor = config.colors_dark.borderColor;
} else {
cardColor = config.colors.cardColor;
headingColor = config.colors.headingColor;
labelColor = config.colors.textMuted;
legendColor = config.colors.bodyColor;
borderColor = config.colors.borderColor;
}
const lineAreaChart = document.getElementById('lineAreaChart');
if (lineAreaChart) {
const lineAreaChartVar = new Chart(lineAreaChart, {
type: 'line',
data: {
labels: [
'7/12',
'8/12',
'9/12',
'10/12',
'11/12',
'12/12',
'13/12',
'14/12',
'15/12',
'16/12',
'17/12',
'18/12',
'19/12',
'20/12',
''
],
datasets: [
{
label: 'Africa',
data: [40, 55, 45, 75, 65, 55, 70, 60, 100, 98, 90, 120, 125, 140, 155],
tension: 0,
fill: true,
backgroundColor: blueColor,
pointStyle: 'circle',
borderColor: 'transparent',
pointRadius: 0.5,
pointHoverRadius: 5,
pointHoverBorderWidth: 5,
pointBorderColor: 'transparent',
pointHoverBackgroundColor: blueColor,
pointHoverBorderColor: cardColor
},
{
label: 'Asia',
data: [70, 85, 75, 150, 100, 140, 110, 105, 160, 150, 125, 190, 200, 240, 275],
tension: 0,
fill: true,
backgroundColor: blueLightColor,
pointStyle: 'circle',
borderColor: 'transparent',
pointRadius: 0.5,
pointHoverRadius: 5,
pointHoverBorderWidth: 5,
pointBorderColor: 'transparent',
pointHoverBackgroundColor: blueLightColor,
pointHoverBorderColor: cardColor
},
{
label: 'Europe',
data: [240, 195, 160, 215, 185, 215, 185, 200, 250, 210, 195, 250, 235, 300, 315],
tension: 0,
fill: true,
backgroundColor: greyLightColor,
pointStyle: 'circle',
borderColor: 'transparent',
pointRadius: 0.5,
pointHoverRadius: 5,
pointHoverBorderWidth: 5,
pointBorderColor: 'transparent',
pointHoverBackgroundColor: greyLightColor,
pointHoverBorderColor: cardColor
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
rtl: isRtl,
align: 'start',
labels: {
usePointStyle: true,
padding: 35,
boxWidth: 6,
boxHeight: 6,
color: legendColor
}
},
tooltip: {
// Updated default tooltip UI
rtl: isRtl,
backgroundColor: cardColor,
titleColor: headingColor,
bodyColor: legendColor,
borderWidth: 1,
borderColor: borderColor
}
},
scales: {
x: {
grid: {
color: 'transparent',
borderColor: borderColor
},
ticks: {
color: labelColor
}
},
y: {
min: 0,
max: 400,
grid: {
color: 'transparent',
borderColor: borderColor
},
ticks: {
stepSize: 100,
color: labelColor
}
}
}
}
});
}