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

Member

by gilbert , in category: Javascript , a year ago

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

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by jasen , a year 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.

Related Threads:

How to remove leading white space inside xml file in php?
How to remove leading white space inside xml file in php?
How to ignore white space in string using regex?
How to remove grid on chart.js?
How to remove the line/rule of an axis in chart.js?
How to remove space when combining variables in powershell?