Multiple Charts In One Page With Chart.js

Question

I use chart.js and its dependency, jQuery to draw chart. In my case, I need 2 doughnut charts in one of my page, here's my code:

Solution 1:

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

<divstyle="width:240px;height:240px"><canvasid="layanan"></canvas></div><divstyle="width:240px;height:240px"><canvasid="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 = newChart(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 = newChart(ctx_2, {
                type: 'doughnut',
                data: data_2,
                options: {
                    maintainAspectRatio: false,
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 12
                        }
                    }
                }
            });
        });

<metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://code.jquery.com/jquery-3.3.1.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script><title>Document</title><divstyle="width:240px;height:240px"><canvasid="layanan"></canvas></div><divstyle="width:240px;height:240px"><canvasid="layanan_subbagian" ></canvas></div>

Solution 2:

Try to add

Baca Juga

options: {

            responsive:false
        }

Solution 3:

I found two solutions:

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.
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><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://code.jquery.com/jquery-3.3.1.js"></script><scriptsrc="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 = newChart(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 = newChart(ctx_2, {
                type: 'doughnut',
                data: data_2,
                options: {
                    responsive: false,
                    maintainAspectRatio: false,
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 12
                        }
                    }
                }
            });
        });

    </script></head><body><div><canvasid="layanan"width="240px"height="240px"></canvas></div><div><canvasid="layanan_subbagian"width="240px"height="240px"></canvas></div></body></html>

JavaScript Creator

Multiple Charts In One Page With Chart.js

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Multiple Charts In One Page With Chart.js"