Dashed gridlines in Chart.js version 4.x

April 19, 2023

How can I make dashed gridlines in Chart.js? I know about the borderDash property, but this doesn’t work for me, and in the documentation I don’t find anything about this.

scales: {
   y: {
     grid: {
        drawTicks: false,
        borderDash:[5,5], //thid don't work
        display: true
     }
   }
}

>Solution :

Since version 4, the border is a specific config node of the axes.

See Migration guide: https://www.chartjs.org/docs/latest/migration/v4-migration.html#specific-changes

Your config should be:

scales: {
   y: {
     border: {
       dash: [5, 5],
       display: true
     } 
     grid: {
        drawTicks: false,
        display: true
     }
   }
}