[Chartjs]-Multiple charts in one page with chart.js

by

15👍

✅

As per chartjs documentation:

Detecting when the canvas size changes can not be done directly from
the CANVAS element. Chart.js uses its parent container to update the
canvas render and display sizes. However, this method requires the
container to be relatively positioned and dedicated to the chart
canvas only. Responsiveness can then be achieved by setting relative
values for the container size

Source: https://www.chartjs.org/docs/latest/general/responsive.html

You should wrap your canvas into div and add width,height into it.

Here is the change I did

<div style="width:240px;height:240px">
    <canvas id="layanan"></canvas>
    </div>
    <div style="width:240px;height:240px">
    <canvas id="layanan_subbagian" ></canvas>
    </div>

$(function () {
            var ctx = document.getElementById("layanan").getContext('2d');
            var data = {
                datasets: [{
                    data: [10, 20, 30],
                    backgroundColor: [
                        '#3c8dbc',
                        '#f56954',
                        '#f39c12',
                    ],
                }],
                labels: [
                    'Request',
                    'Layanan',
                    'Problem'
                ]
            };
            var myDoughnutChart = new Chart(ctx, {
                type: 'doughnut',
                data: data,
                options: {
                    maintainAspectRatio: false,
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 12
                        }
                    }
                }
            });

            var ctx_2 = document.getElementById("layanan_subbagian").getContext('2d');
            var data_2 = {
                datasets: [{
                    data: [10, 20, 30],
                    backgroundColor: [
                        '#3c8dbc',
                        '#f56954',
                        '#f39c12',
                    ],
                }],
                labels: [
                    'Request',
                    'Layanan',
                    'Problem'
                ]
            };
            var myDoughnutChart_2 = new Chart(ctx_2, {
                type: 'doughnut',
                data: data_2,
                options: {
                    maintainAspectRatio: false,
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 12
                        }
                    }
                }
            });
        });
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>

    <title>Document</title>
    

    <div style="width:240px;height:240px">
    <canvas id="layanan"></canvas>
    </div>
    <div style="width:240px;height:240px">
    <canvas id="layanan_subbagian" ></canvas>
    </div>

3👍

I found two solutions:

  1. You have to put the charts in a container such as a div. <canvas> is an element semantically dedicated for drawing graphics dynamically via scripting. <div> is a general-purpose container. The important point is: width and height properties are not the size in px but the ratio between them. <canvas id="layanan" width="240px" height="240px"></canvas> would result into a 1:1 ratio, but you need a parent container to work with. In the example below, I put a div around each canvas.

  2. You can disable this feature by setting maintainAspectRatio to false. Removing the divs from my code and setting this into yours gives the same result 🙂

Cheers!

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>

    <title>Document</title>
    <script>
        $(function () {
            var ctx = document.getElementById("layanan").getContext('2d');
            var data = {
                datasets: [{
                    data: [10, 20, 30],
                    backgroundColor: [
                        '#3c8dbc',
                        '#f56954',
                        '#f39c12',
                    ],
                }],
                labels: [
                    'Request',
                    'Layanan',
                    'Problem'
                ]
            };
            var myDoughnutChart = new Chart(ctx, {
                type: 'doughnut',
                data: data,
                options: {
                    responsive: false,
                    maintainAspectRatio: false,
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 12
                        }
                    }
                }
            });

            var ctx_2 = document.getElementById("layanan_subbagian").getContext('2d');
            var data_2 = {
                datasets: [{
                    data: [10, 20, 30],
                    backgroundColor: [
                        '#3c8dbc',
                        '#f56954',
                        '#f39c12',
                    ],
                }],
                labels: [
                    'Request',
                    'Layanan',
                    'Problem'
                ]
            };
            var myDoughnutChart_2 = new Chart(ctx_2, {
                type: 'doughnut',
                data: data_2,
                options: {
                    responsive: false,
                    maintainAspectRatio: false,
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 12
                        }
                    }
                }
            });
        });

    </script>
</head>

<body>
  <div>
      <canvas id="layanan" width="240px" height="240px"></canvas>
  </div>

  <div>
      <canvas id="layanan_subbagian" width="240px" height="240px"></canvas>
  </div>
</body>

</html>

3👍

Try to add 

options: {

            responsive: false
        }

Leave a comment