chart.js hide gridline inside chartarea but keep y-axis border

Question

I would like to remove the gridLines, but still have a border on my y-axis. Here's what it looks like.

I cannot seem to find a solution.

I tried using drawBorder: true but it's overwritten by drawOnChartArea: false.

My code currently looks like this:

 options: {
  legend: {
    display: false
  },
  scales: {
    yAxes: [{
      gridLines: {
        drawOnChartArea: false,
        // drawBorder: true,
        // display: false,

      },
    }],
    xAxes: [{
      gridLines: {
        drawBorder: true,
        display: false,

      },
      ticks: {
        display: false,
        min: 20,
        max: 70
      }
    }]
  }
}

Answer 1

Set scales.yAxes[0].gridLines.drawTicks to false and and some padding in gridLines.ticks.padding:

{
    type: 'horizontalBar',
    data: {
        labels: [4, 3, 2, 1],
        datasets: [{
            data: [50, 60, 70, 180]
        }]
    },
    options: {
        legend: {
            display: false
        },
        scales: {
            yAxes: [{
                gridLines: {
                    drawOnChartArea: false,
                    drawTicks: false,
                },
                ticks: {
                    padding: 10
                }
            }],
            xAxes: [{
                gridLines: {
                    drawBorder: true,
                    display: false,

                },
                ticks: {
                    display: false,
                    min: 20,
                    max: 70
                }
            }]
        }
    }
}