Display 4 graphs on a web page 2 above and 2 below .

[paolodecaro]

Good evening Friends , I ask you for a little help. I need to display 4 graphs on a html page 2 above side by side and 2 below side by side. I can't do it I page them one below the other. I'm sure you have an idea. Thanks in advance

[Udemology]

Have you checked this: https://www.youtube.com/watch?v=cxf_GEiryoc&t=1s

As it looks like more a CSS matter and with Chart.js it would be difference canvas ID's.

[Syaptiyan]

You can use CSS Grid to create a 2x2 layout for your charts. Here is a simple example:

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
  <canvas id="chart1"></canvas>
  <canvas id="chart2"></canvas>
  <canvas id="chart3"></canvas>
  <canvas id="chart4"></canvas>
</div>

Then create each chart as usual:

const chart1 = new Chart(document.getElementById("chart1"), {
  type: "line",
  data: { /* your data */ },
  options: { responsive: true }
});

// Repeat for chart2, chart3, chart4

Key points:

• grid-template-columns: 1fr 1fr creates 2 equal columns
• gap: 20px adds spacing between charts
• responsive: true makes charts resize with their container

If you want the charts to be responsive on mobile too, you can add a media query:

@media (max-width: 768px) {
  .chart-grid {
    grid-template-columns: 1fr;
  }
}

This will stack the charts vertically on smaller screens.