How to remove the white space around a chart in chart.js?

Member

by gilbert , in category: Javascript , 2 months ago

How to remove the white space around a chart in chart.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by jasen , 2 months ago

@gilbert 

To remove the white space around a chart in Chart.js, you can use the layout.padding property in the options object of the chart configuration. You can set the padding values to 0 to remove the white space around the chart.


Here's an example of how you can remove the white space around a chart in Chart.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var ctx = document.getElementById('myChart').getContext('2d');

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'red',
                'blue',
                'yellow',
                'green',
                'purple',
                'orange',
            ],
            borderWidth: 1
        }]
    },
    options: {
        layout: {
            padding: {
                top: 0,
                right: 0,
                bottom: 0,
                left: 0
            }
        }
    }
});


In this example, the padding values for top, right, bottom, and left are all set to 0, which removes the white space around the chart. You can adjust the padding values as needed to achieve the desired layout for your chart.