'charts.js ticks adding padding to themselves (no to canvas or frame)

const ctx = document.getElementById('myChart').getContext('2d');

let point = new Image(30, 30);
point.src = 'yellow_pointer.png';

let gradient = ctx.createLinearGradient(0, 0, 0, 600);
gradient.addColorStop(1, 'rgba(251,189,8, 0.0005)');
gradient.addColorStop(0, 'rgba(255, 191, 8)');


let myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['30Days', '90Days', '180Days', '', '365Days'],
        datasets: [{
            lineTension: 0.3,
            label: '',
            data: [2, 3, 6, 12, 24],
            backgroundColor: gradient,
            borderColor:'#fccc69',
            borderWidth:5,
            pointBorderColor: 'transparent',
            fill: true,
            pointStyle: [point,point,point,'none',point],
            pointRadius: 10,
            pointHitRadius: 25,
            hoverWidth: 2,
            pointBackgroundColor: 'transparent',
            pointPaddingLeft: 50,
        },
        {
            lineTension: 0.3,
            label: '',
            borderColor: 'rgba(0, 0, 0, 0.3)',
            borderDash: [15],
            data: [5, 7, 12, 24, 40],
            backgroundColor: 'transparent',
            pointStyle: 'none', 
            pointBackgroundColor: 'transparent',
            pointBorderColor:'transparent'
          },
    ]
        
    },
    
    options: {
        responsive: true,
        maintainAspectRatio: true,
        plugins:{
            legend:{
                display: false,
            }
        },
        scales: {
            y: {
                ticks:{
                    display: false,
                },
            },
            x: {
                
                ticks: {
                    type: 'time',
                    autoSkip: false,
                    font: {
                        family: 'Montserrat', 
                        size: 20,
                        color: 'black',
                    },
                },
            },
        }
    }
});

i'd like exact sime of it

and here is mine:

enter image description here

days should be in a ratio of 356 and i cant handle it

which config setting for ticks handles this i tried stepsize bu it seems like it didnt work

at right there is estimated section as you see can it be added by js or do i have to use css this one is css form



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source