type heatmap. Enable Apache ECharts 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" style="width:480px;height:320px"></div>';
const c = echarts.init(document.getElementById("c"));
c.setOption({ xAxis: { data: ["mango","soda"] }, yAxis: { data: ["Nairobi","Mombasa"] }, visualMap: { min: 0, max: 15 }, series: [{ type: "heatmap", data: [[0,0,12],[1,0,9],[0,1,7],[1,1,8]] }] });
console.log('heat');

document.body.innerHTML = '<div id="c" style="width:480px;height:320px"></div>';
const c = echarts.init(document.getElementById("c"));
c.setOption({ xAxis: { data: ["Nairobi", "Mombasa", "Kisumu", "Nakuru", "Eldoret"] }, yAxis: {}, series: [{ type: "bar", data: [21, 15, 15, 18, 12] }] });
console.log('bar');

document.body.innerHTML = '<div id="c" style="width:480px;height:320px"></div>';
const c = echarts.init(document.getElementById("c"));
c.setOption({ xAxis: { data: ["Jan", "Feb", "Mar", "Apr"] }, yAxis: {}, series: [{ type: "line", data: [48, 55, 92, 150] }] });
console.log('line');

console.log('heat');