Data in the script

JSON string.

JSON string. 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.

const rows = JSON.parse('[{"city":"Nairobi","units":21},{"city":"Mombasa","units":15},{"city":"Kisumu","units":15}]');
document.body.innerHTML = '<canvas id="c" width="420" height="260"></canvas>';
new Chart(document.getElementById("c"), {
  type: "bar",
  data: { labels: rows.map(r => r.city), datasets: [{ label: "units", data: rows.map(r => r.units) }] },
  options: { responsive: false }
});
console.log("from JSON", rows.length);
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('files');