[Chartjs]-Hiding the ticks on the x-axes clips the chart (Chart.JS)

by

3đź‘Ť

âś…

I figured it out!

You can adjust the height/length of the tick marks by using “tickMarkLength” within “gridlines”

You can see the code for the solution below:

xAxes: [
    {
        id: 'first-x-axis',
        ticks: {
            display: false,
            min: <?php echo $min ?>, // Controls where axis starts
            max: <?php echo $max ?>, // Controls where axis finishes
            stepSize: <?php echo $step ?> // Control the gap between the first x-axis value and the last x-axis value
        },
        gridLines: {
            display: false,
            lineWidth: 7,
            tickMarkLength: 30// Adjusts the height for the tick marks area
        }
    }
]

I hope this helps!

Leave a comment