Chartjs-Chart.js – How draw x and y axes lines on the left and bottom

by

1👍

✅

You’ll need to enable the gridLines on both xAxes and yAxes, but disable the drawOnchartArea:

xAxes: [{
        ticks: {
          min: 1,
          max: 99,
        },
        gridLines: {
          color: 'red',
          display: true,
          drawBorder: true,
          drawOnChartArea: false
        },
      }],
      yAxes: [{
        gridLines: {
           color: 'red',
            display: true,
            drawBorder: true,
            drawOnChartArea: false
        }
     }]

enter image description here

1👍

try below, you need to keep the lines but hide them in the chart area.

This you can do by drawOnChartArea: false, see this documentation

gridLines: {
        drawBorder:true,
      drawOnChartArea: false,
      color: 'red',
      display: true,
      zeroLineColor: 'red'
    },

hope this helps.

Leave a comment