React-Chartjs-2 How to create dashed gridlines

Question

Im using react-chartjs-2 and trying to create dashed gridlines on the y-axis

I tried to look on Chart Config Web: https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

But cant find the trick

Here is my code:

import { Chart } from 'react-chartjs-2';

import {Chart as ChartJS, registerables} from 'chart.js';
ChartJS.register(...registerables);

const data = {
    labels: ["Label1", "Label2", "Label3"],
    datasets: [{
        label: 'legend1',
        data: [12, 19, 3],
    },{
        label: 'legend2',
        data: [22, 9, 13],
      
    }]
};

const options = {
    scales: {
        y: {
            grid: {
                tickBorderDash: [4, 4],
                tickColor: '#000',
                tickWidth: 2,
                offset: true,
                drawTicks: true,
                drawOnChartArea: true
            },

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


const BarChart = (props : Props) => {
    return (
        
        <Chart type='bar' data={data} options={options} />

    );
};

Thank you!

Answer 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).