show multiple responsive chart in the same page using chart.js

Question

I need to show four charts in the same page so that they will be responsive that is changed their size when the page is resized. I use

<script src="js/Chart.bundle.js">   </script>
  <div id="container" style="width: 100%;text-align:center">       
    <table width="90%">
        <tr>
            <td colspan="2" id="tdTitle" >
                Title
            </td>
        </tr>
        <tr>
            <td id="tdLeftTop" width="50%" >                   
                 <canvas id="canvasLeftTop"></canvas>

            </td>
            <td id="tdRightTop" width="50%">
                <canvas id="canvasRightTop"></canvas>
            </td>
        </tr>
          <tr>
            <td id="tdLeftBottom" width="50%">
                 <canvas id="canvasLeftBottom"></canvas>
            </td>
            <td id="tdRightBottom" width="50%">
                <canvas id="canvasRightBottom"></canvas>
            </td>
        </tr>
    </table>
   </div>

and to each canvas I attach a chart with option responsive: true. But the result is not responsive. If I use canvas outside of a table that it works in a right way. What can I do?

score 1 · Accepted Answer · edited May 23 '17 at 12:17

You should abandon using tables and use DIVs instead.

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

<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.

@eug100 Don't forget to accept the answer if you are happy with it :) — jordanwillis, Mar 01 '17 at 18:30

show multiple responsive chart in the same page using chart.js

1 Answers1