JavaScript
-
How to Add Charts to Your Website
Sections:
// AZUL CODING ---------------------------------------
// JavaScript - How to Add Charts to Your Website
// https://youtu.be/cioBV2ZuRgI
const container = document.getElementById("chart-container");
const updateBtn = document.getElementById("update-data-btn");
const themeBtn = document.getElementById("toggle-theme-btn");
const ctx = document.getElementById("chart").getContext("2d");
let chart;
function setupChart(type, withCustomOptions = false) {
const isPie = type == "pie" || type == "doughnut";
const customOptions = {
bar: { borderWidth: 3 },
line: { fill: true },
pie: {
spacing: 5,
backgroundColor: [
"rgba(255, 99, 132, 0.8)",
"rgba(54, 162, 235, 0.8)",
"rgba(255, 205, 86, 0.8)",
"rgba(75, 192, 192, 0.8)",
"rgba(153, 102, 255, 0.8)",
"rgba(255, 159, 64, 0.8)"
]
},
doughnut: { cutout: "30%" }
};
Chart.defaults.color = "black";
Chart.defaults.font.family = "'Golos Text', system-ui, sans-serif";
Chart.defaults.font.size = 14;
chart = new Chart(ctx, {
type,
data: {
labels: [
"January", "February", "March", "April", "May", "June"
],
datasets: [
{
...(withCustomOptions && customOptions[type]),
label: "Sales",
data: [12, 19, 3, 17, 6, 3],
},
...(isPie ? [] : [{
...(withCustomOptions && customOptions[type]),
label: "Targets",
data: [10, 7, 3, 5, 10, 5]
}])
]
},
options: {
animation: false,
responsive: true,
maintainAspectRatio: false,
...(!isPie && {
scales: {
x: {
grid: { color: "gray" },
},
y: {
grid: { color: "gray" },
title: {
display: true,
text: "Units sold",
font: { style: "italic" }
}
}
}
}),
...(type == "line" && {
elements: {
point: {
radius: 10,
pointStyle: "crossRot",
borderWidth: 5
}
}
}),
plugins: {
title: {
display: true,
text: "H1 Sales",
font: { size: 20 }
},
legend: {
display: true,
position: "right"
},
tooltip: { enabled: false }
}
}
});
chart.options.animation = true;
}
function updateData() {
chart.data.datasets[0].data = [6, 7, 14, 5, 6, 10];
chart.update();
}
function toggleTheme() {
window.darkmode = !window.darkmode;
container.style.backgroundColor = window.darkmode ? "black" : "white";
const textColor = window.darkmode ? "white" : "black";
Chart.defaults.color = textColor;
if (chart.config.type == "bar" || chart.config.type == "line") {
chart.options.scales.x.ticks.color = textColor;
chart.options.scales.y.ticks.color = textColor;
}
chart.update("none");
}
updateBtn.addEventListener("click", updateData);
themeBtn.addEventListener("click", toggleTheme);
setupChart("bar"); // or "line", "pie", "doughnut"
// enable custom options
// setupChart("bar", true);
Help support the channel
<!-- AZUL CODING --------------------------------------- -->
<!-- JavaScript - How to Add Charts to Your Website -->
<!-- https://youtu.be/cioBV2ZuRgI -->
<!DOCTYPE html>
<html>
<head>
<title>Azul Coding</title>
<style>
* {
font-family: 'Golos Text', system-ui, sans-serif;
font-weight: 500;
font-size: 18px;
}
body {
background-color: #03506E;
height: 100vh;
box-sizing: border-box;
padding: 30px;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 15px;
}
#chart-container {
height: 500px;
background-color: white;
padding: 30px;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
}
#actions {
display: flex;
gap: 10px;
justify-content: center;
}
button {
background-color: white;
color: #03506E;
border: none;
border-radius: 5px;
padding: 6px 12px;
cursor: pointer;
display: inline;
}
button:hover {
background-color: #49c8fc;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="script.js" defer></script>
</head>
<body>
<div id="chart-container">
<canvas id="chart" aria-label="Sales chart" role="img"></canvas>
</div>
<div id="actions">
<button type="button" id="update-data-btn">
Update data
</button>
<button type="button" id="toggle-theme-btn">
Toggle theme
</button>
</div>
</body>
</html>
