chart.js – How draw x and y axes lines on the left and bottom

May 12, 2022

I use chart.js v2 library to draw a chart.
I tried to set a zero line but it’s not working.
I need to draw two lines like on the screenshot below. Is it possible to draw with some cinfiguration options?

var options = {
  type: 'scatter',
  data: {
    datasets: [{
      data: [{
          x: 20,
          y: 1
        },
        {
          x: 21,
          y: 1.1
        },
        {
          x: 23,
          y: 1.4
        },
      ],
    }]
  },
  options: {
    legend: false,
    scales: {
      yAxes: [{
        ticks: {
          min: 1,
          max: 2,
          display: false,
        },
        gridLines: {
          color: 'transparent',
          display: true,
          zeroLineColor: 'red'
        },
      }],
      xAxes: [{
        ticks: {
          min: 1,
          max: 99,
        },
        gridLines: {
          color: 'transparent',
          display: true,
          zeroLineColor: 'red'
        },
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

Here is a fiddle with code:
https://jsfiddle.net/c4wotrx1/4/

>Solution :

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
        }
     }]