Chartjs-How do I change the grid line style on the Y axis in Chart.js?

by

3👍

✅

You can define a second y-axis responsible for drawing the solid grid lines only.

y2: {
  max: 100,
  min: 0,
  ticks: {
    display: false,
    stepSize: 25
  },
  grid: {
    drawTicks: false,
    drawBorder: false,
    color: 'rgba(255, 255, 255, 0.2)'
  }
}

Also add y.gird.lineWidth as follows in order to omit the dashed lines where a solid line should appear.

lineWidth: ctx => ctx.index % 5 ? 1 : 0

Please take a look at your amended code and see how it works.

new Chart('chart', {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: '',
                barPercentage : 0.05,
                data: [80, 19, 3, 5, 2, 3, 30, 20, 30],
                backgroundColor: [
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)'
                ],
                borderColor: [
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)'
                ],
                borderWidth: 0.1
            },{
                type : 'bubble',
                data : [
                    {   
                        x : 20,
                        y : 80,
                        r : 50
                    },
                    {   
                        x : 40,
                        y : 19,
                        r : 20
                    },
                    {   
                        x : 60,
                        y : 3,
                        r : 1
                    },
                    {   
                        x : 80,
                        y : 5,
                        r : 20
                    },
                    {   
                        x : 100,
                        y : 2,
                        r : 5
                    },
                    {   
                        x : 120,
                        y : 3,
                        r : 5
                    },
                    {   
                        x : 140,
                        y : 30,
                        r : 20
                    },
                    {   
                        x : 140,
                        y : 20,
                        r : 20
                    },
                    {   
                        x : 140,
                        y : 30,
                        r : 50
                    }
                ],
                backgroundColor: 'rgba(148, 181, 115, 0.7)',
                borderColor     : 'rgba(228, 248, 188, 0.92)'
            }]
        },
        options: {
            responsive : true,
            plugins : {
                legend : {
                    display : false
                },
                chartAreaBorder: {
                    borderColor: 'rgba(255, 255, 255, 0.2)',
                    borderWidth: 2,
                }
            },
            scales: {
                x : {
                    display : false,
                    max : 100,
                    min : 0,
                    ticks : {
                        stepStze : 10,
                        callback : () => ('')
                    },
                    grid : {
                        drawTicks : false,
                        //color : 'rgba(255, 255, 255, 0.2)',
                        borderWidth : 2
                    }
                },
                y : {
                    max : 100,
                    min : 0,
                    ticks : {
                        display: false,
                        stepSize : 5
                    },
                    grid : {                    
                        drawTicks: false,
                        drawBorder : true,
                        borderWidth : 2,     
                        borderDash : [5,5],
                        borderDashOffset : 2,
                        color : 'rgba(255, 255, 255, 0.2)', 
                        lineWidth: ctx => ctx.index % 5 ? 1 : 0
                    }
                },               
                y2 : {
                    max : 100,
                    min : 0,
                    ticks : {
                        display: false,
                        stepSize : 25
                    },
                    grid : {
                        drawTicks: false,
                        drawBorder : false,
                        color : 'rgba(255, 255, 255, 0.2)'
                    }
                }
            },
            interaction : {
                mode : 'index'
            },
        }
    });
body {
  background-color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
<canvas id="chart"></canvas>

Leave a comment