Two canvases. Enable Chart.js under Libraries, wait until it is checked, then paste the whole editor.
Goal
Run every block and confirm the chart is visible.
document.body.innerHTML = '<canvas id="a" width="400" height="220"></canvas><canvas id="b" width="400" height="220"></canvas>';
new Chart(document.getElementById("a"), { type: "bar", data: { labels: ["Nairobi", "Mombasa", "Kisumu", "Nakuru", "Eldoret"], datasets: [{ label: "units", data: [21, 15, 15, 18, 12] }] }, options: { responsive: false } });
new Chart(document.getElementById("b"), { type: "line", data: { labels: ["Jan", "Feb", "Mar", "Apr"], datasets: [{ label: "Nairobi mm", data: [48, 55, 92, 150] }] }, options: { responsive: false } });
console.log("dashboard");document.body.innerHTML = '<canvas id="c" width="420" height="260"></canvas>';
new Chart(document.getElementById("c"), {
type: "bar",
data: { labels: ["Nairobi", "Mombasa", "Kisumu", "Nakuru", "Eldoret"], datasets: [{ label: "units", data: [21, 15, 15, 18, 12], backgroundColor: "#1d4f7a" }] },
options: { responsive: false }
});
console.log("bar again");document.body.innerHTML = '<canvas id="c" width="420" height="260"></canvas>';
new Chart(document.getElementById("c"), {
type: "line",
data: { labels: ["Jan", "Feb", "Mar", "Apr"], datasets: [{ label: "Nairobi", data: [48, 55, 92, 150] }] },
options: { responsive: false }
});
console.log("line");console.log('practice');