Chart.js padding canvas

问题

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
            }]
        }
    }
};

回答1:

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.

回答2:

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

回答3:

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

来源：https://stackoverflow.com/questions/38611346/chart-js-padding-canvas

标签

canvas

padding

chart.js