Side-by-side

two divs.

two divs. Enable Plotly 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="a" style="width:240px;height:240px;display:inline-block"></div><div id="b" style="width:240px;height:240px;display:inline-block"></div>';
Plotly.newPlot("a", [{ type: "bar", x: ["mango","soda"], y: [12, 9] }], { title: "Nairobi" });
Plotly.newPlot("b", [{ type: "bar", x: ["mango","soda"], y: [7, 8] }], { title: "Mombasa" });
console.log("two plots");
document.body.innerHTML = '<div id="plot" style="width:480px;height:320px"></div>';
Plotly.newPlot("plot", [{ type: "bar", x: ["Nairobi", "Mombasa", "Kisumu", "Nakuru", "Eldoret"], y: [21, 15, 15, 18, 12] }], { title: "Units" });
console.log("bar");
document.body.innerHTML = '<div id="plot" style="width:480px;height:320px"></div>';
Plotly.newPlot("plot", [{ type: "scatter", mode: "lines+markers", x: ["Jan", "Feb", "Mar", "Apr"], y: [48, 55, 92, 150] }], { title: "Rain" });
console.log("line");
console.log('facet');