[Chartjs]-React-Chartjs-2 How to create dashed gridlines

by

1👍

✅

By looking at the source code, I gathered that for some reason y.grid.tickBorderDash option only applies to the tick marks, not for the grid lines. Actually, the option is applied only for lines that are not affected by drawOnChartArea: true.

To make y axis gridlines dashed, one has to set y.border.dash option. This doesn’t seem very consistent to me, but that’s the way the code currently functions.

So this should work:

const options = {
    scales: {
        y: {
            border:{dash: [4, 4]}, // for the grid lines
            grid: {
                color: '#aaa', // for the grid lines
                tickColor: '#000', // for the tick mark
                tickBorderDash: [2, 3], // also for the tick, if long enough
                tickLength: 10, // just to see the dotted line
                tickWidth: 2,
                offset: true,
                drawTicks: true, // true is default 
                drawOnChartArea: true // true is default 
            },

            beginAtZero: true,
        },
        x: {
            display: false
        }
    },
};

Note: I tested with charts.js 4.2.0 (latest at the time of posting).

Leave a comment