chart.js how to show tick marks but hide gridlines

Question

I"m creating a chart using chart.js with two y axes. One y axis has gridlines and the other doesn't have gridlines (if they both have gridlines, they overlap and it looks bad). Porblem is, when I turn off gridlines, it also seems to turn off the tick marks for the axis. How do I turn off the gridlines without turning off the tick marks?

This is the key part of my code that I tried:

gridLines: {
                display: false,
              },
              ticks: {
                display: true,
   }

Any help is greatly appreciated.

Answer 1

I showed the gridlines for both y axes and then for just one y axis I have:

gridLines: {
                    display: true,
                    drawOnChartArea: false,
                  },

The drawOnChartArea set to false removes the part of the gridlines inside the axes lines.