JSON rows. Enable ApexCharts 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 = '<div id="c"></div>';
new ApexCharts(document.getElementById("c"), { chart: { type: "bar", height: 280, width: 420 }, series: [{ name: "units", data: [21,15,15] }], xaxis: { categories: ["Nairobi","Mombasa","Kisumu"] } }).render();
console.log('files');

document.body.innerHTML = '<div id="c"></div>';
new ApexCharts(document.getElementById("c"), { chart: { type: "bar", height: 280, width: 420 }, series: [{ name: "units", data: [21, 15, 15, 18, 12] }], xaxis: { categories: ["Nairobi", "Mombasa", "Kisumu", "Nakuru", "Eldoret"] } }).render();
console.log('bar');

document.body.innerHTML = '<div id="c"></div>';
new ApexCharts(document.getElementById("c"), { chart: { type: "line", height: 280, width: 420 }, series: [{ name: "Nairobi", data: [48, 55, 92, 150] }], xaxis: { categories: ["Jan", "Feb", "Mar", "Apr"] } }).render();
console.log('line');

console.log('files');