Chart.js padding canvas

Question

I'm using latest chart.js library to generate a line chart without scales, but there is a padding problem and top and bottom points are cut off. I couldn't see any option for padding canvas.

My config is like below.

var config = { type: 'line', data: { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: "Sales", data: [10, 20, 50, 25, 60, 12, 48], fill: true, lineTension: 0.25, borderColor: "#558aeb", backgroundColor: "#558aeb" }] }, options: { responsive: true, legend: { display: false }, tooltips: { mode: 'label' }, hover: { mode: 'dataset' }, scales: { xAxes: [{ display: false }], yAxes: [{ display: false }] } } };

indusBull · Accepted Answer · 2017-08-25 16:13:17Z

If I understood the question correct, current version (>2.4) of Chart JS supports padding config option around chart layout.

layout: { padding: { // Any unspecified dimensions are assumed to be 0 top: 25 } }

Check here

xnakos · Accepted Answer · 2016-07-27 18:12:03Z

I believe that your problem is not padding, but I could be wrong. As I see it, your problem is the auto-detection of the height of the drawable area, when the maximum number in your data is nice and round, like 60 is. Try to see if the problem persists when the maximum number is 61, 62, etc. So, I suggest you cook your data, so that no such problems occur. If data-cooking is not an option, try to explicitly define the maximum tick in the y-axis, so that it is just a bit over the maximum number in the data. In your case, try using this:

yAxes: [{ display: false, ticks: { max: 62 } }]

So you will need to calculate the maximum number in the data and add something small, in order to explicitly define a maximum tick that will get rid of the unexpected cropping. Someone could have a better understanding and solution but that is the option I can think of. That, and cooking your data, of course.

Yes that solved top cut-offs. I've also set ticks { min: -5 } and this solved bottom cut-offs, but caused empty space. Which can be fixed easily. Thank you
@xnakos : is it possible to add text box in x axis line.Instead of filling the points in top of the every graph need to show the point in xaxis line .can you share any code available

Oriol · Accepted Answer · 2021-07-01 13:30:49Z

If you want to increase the "buffer" on the Y axis so that the maximum value doesn't get displayed all the way to the top, I've successfully done it using "grace".

options: { scales: { y: { type: 'linear', grace: '10%' } } }

Chartjs 3.x Documentation for grace

Carlos Nuñez Tomeo · Accepted Answer · 2016-09-22 15:46:07Z

I've been investigated how to make a hotfix to solve that. I saw three strange behaviors:

1- The data breaks if have heavy changes, for example:

[0, 10, 70, 30, 20, 12, 50, 200, 200, 200, 200, 200]

2- The 'error' is always the half of the height of our borderWidth.

3- That error may was introduced when we changed the line 36 of core.layoutService.js on the next COMMIT

In second place I saw two strange padding vars inside the function 'update' of the core.layoutService:

Around the line 29 we have the function and on lines 35 and 36 we have the strange vars.

// The most important function update: function(chartInstance, width, height) { if (!chartInstance) { return; } var xPadding = 0; var yPadding = 0;

I have been seen what the function does with that vars, specially with yPadding. I couldn't se any useful calc done with yPadding. In my opinion here is the problem. We always maintain the yPadding to 0 and IMHO it was an error applied in another version of that file HERE .

The solution is that follows and I developed that because is the demand behind the developer of that commit deleted the line.

THAT'S A HOTFIX, I WILL MAKE A PR AND IF IT IS APPROVED IT WILL BE THE SOLUTION

If you apply that code you will can set your padding on the styles config of the chart, also, if you don't apply any config he will take a default based on the chart height.

Config prop example:

padding: { x: 5, y: 4 },

You have the code and all the explanation here: https://github.com/chartjs/Chart.js/pull/3349

Collectives™ on Stack Overflow

Chart.js padding canvas

4 Answers 4

Comments

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Linked

Related