[Chartjs]-Show multiple responsive chart in the same page using chart.js

by

1👍

✅

You should abandon using tables and use DIVs instead.

Here is an example using a responsive 2×2 grid where each DIV contains your canvas. The css used was taken from this answer and modified for 2×2.

<div class="w">
  <section>
    <div>
      <canvas id="canvasLeftTop"></canvas>
    </div>
    <div>
      <canvas id="canvasRightTop"></canvas>
    </div>
    <div>
      <canvas id="canvasLeftBottom"></canvas>
    </div>
    <div>
      <canvas id="canvasRightBottom"></canvas>
    </div>
  </section>
</div>

And the css:

html, body {
  margin:0;
}
.w{
  overflow:hidden;
}
section div {
  float: left;
  height: 24vw;
  margin: 1%;
  width: 46%;
  border-style: solid;
  border-width: 1px;
}
section {
  margin:-1%;
  padding:20px;
}

Note, remove the section div height property once you instantiate your Chart.js charts. The height was simply added in this example to show the grid in action.

Here is a working example of the above code.

Leave a comment