CODEWITHSUNDEEP
javascriptjqueryhighcharts
Maxx
Maxx

Reputation: 602

HighStocks - x-axis Gridlines on each separate y-axis

I'm trying to draw x-axis gridlines on each y-axis of the chart. Right now the x-axis gridline extends through all of the y-axis with no separation or stops between each y-axis.

Here is how I'm getting nowenter image description here

the code for the x-axis 

xAxis: {
            gridLineWidth: 5,
            minTickInterval: 24 * 3600 * 1000,
            lineColor: '#000',
            tickColor: '#000',
            startOnTick: true,
            labels: {
                style: {
                    color: '#000',
                    font: '11px Trebuchet MS, Verdana, sans-serif'
                }
            },
            title: {
                style: {
                    color: '#333',
                    fontWeight: 'bold',
                    fontSize: '12px',
                    fontFamily: 'Trebuchet MS, Verdana, sans-serif'

                }
            }
        },

How can I prevent the line from extending to all the chart i.e. on all y-axis. This is what I want it to be like enter image description here

Please let me know how can I achieve the desired result. I will appreciate any help.

Thanks, Maxx

Upvotes: 0

Views: 98

Answers (2)

jlbriggs
jlbriggs

Reputation: 17800

I don't think you can, in actuality.

Several possible ways around it:

  • using the renderer to draw a box over each area to hide them

  • set up each gap as another y axis, and use a white plotBand to hide them

None of them are clean, but...

Upvotes: 0

Paweł Fus
Paweł Fus

Reputation: 45079

It's interesting, because this is how it works in Highstock 1.3.10, see: http://jsfiddle.net/4qGKE/

        xAxis: {
            gridLineWidth: 1  
        },

However Highcharts doesn't support this for now ( see: http://jsfiddle.net/4qGKE/1/ ) .

Upvotes: 1

Related Questions