CODEWITHSUNDEEP
highcharts
Dan
Dan

Reputation: 537

How do I enable y-axis gridline at the ticks?

This page works nicely but I would like to add horizontal gridlines at the y-axis ticks.

This is the relevant section:

yAxis: {
                title: {
                  text: 'Height of tide<br>in feet.'
                    },
                    gridLineColor: '#197F07',
                    gridLineWidth: 1,
                    lineWidth:1,
                    plotLines: [{
                        color: '#FF0000',
                        width: 1,
                        value: 0
                }]

so I assume I can add something in there to enable the gridlines but I couldn't work it out from the Highcharts docs.

Upvotes: 0

Views: 29

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

To show ticks on the yAxis you need to set their width (default = 0) to some other value.

Demo: https://jsfiddle.net/BlackLabel/p7L5r9ou/

  yAxis: {
    title: {
      text: 'Height of tide<br>in feet.'
    },
    gridLineColor: '#197F07',
    gridLineWidth: 1,
    lineWidth: 1,
    plotLines: [{
      color: '#FF0000',
      width: 1,
      value: 0
    }],
    tickWidth: 1,
        tickColor: '#197F07'
  },

API: https://api.highcharts.com/highcharts/yAxis.tickWidth

Upvotes: 1

Related Questions