[Chartjs]-Chart.js y axis labels are truncated

4👍

Just add the following:

options: {
                                layout: {
                                    padding: {
                                        // Any unspecified dimensions are assumed to be 0
                                        left: 10,
                                        bottom: 5
                                    }
                                },

That will fix the problem.

0👍

just copy and paste the below option this will fix your problem and also customize by removing or adding properties.

lineGraphOption: ChartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    elements: {
        point:
        {
            radius: 0,
        },
    },
    tooltips: {
        mode: 'index'
    },
    layout: {
        padding: {
            top: 50,
            right: 10,
            bottom: 50,
            left: 10,
        }
    },
    legend: {
        position: "bottom",
        display: true,
        onClick: (() => {
        }),
        align: "center",
        labels: {
            boxWidth: 12,
            padding: 30
        },
    },
    scales: {
        xAxes: [{
            type: 'time',
            time: {
                unit: 'day',
                minUnit: 'month',

                unitStepSize: 4,
                displayFormats: {
                    'month': 'MMM DD',
                }
            },
            ticks: {
                max: '31 Oct',
            }
        }],
        yAxes: [{
            ticks: {
                callback: function (value) {
                    return value + ' K'
                }
            },
        }]
    },

    plugins: {

    }
}

Leave a comment