5

I have a highcharts graph and everything is going on as the mockup below. But there are a few things I am stuck on. Is there a way to remove all the gridlines from the yAxis except for the one in 0 like the one shown in the picture below with highcharts? Or do we have to use our own javascript to accomplish that? Also, can we show the grey colored areas like that one between the yAxis label and the graph and the one in the right side of the graph (end of the graph) ?

graph mockup

Thanks For any suggestions.

saurjk
  • 973
  • 3
  • 13
  • 27
  • 1
    You can use Plotlines and Plotbands for that. – Nina Apr 21 '13 at 12:56
  • @Nina thanks for the heads up on that, I had used plotlines, but was not sure about having more than one. Thanks again. – saurjk Apr 21 '13 at 13:24
  • m not able to increase the length of the plotlines, but it did do half of the work required ... – saurjk Apr 21 '13 at 13:35
  • If you want you can put up a JSFiddle and we can have a look at it – Nina Apr 21 '13 at 16:59
  • Here it is, http://jsfiddle.net/saurjk/JWZ2S/, i need the red plotline to touch the yAxis label line, is that possible ? – saurjk Apr 22 '13 at 15:28

1 Answers1

19

You can set gridLineWidth as 0. http://api.highcharts.com/highcharts#xAxis.gridLineWidth

Example: http://jsfiddle.net/ssQVJ/

yAxis: {
        gridLineColor: '#197F07',
        gridLineWidth: 0,
        lineWidth:1,
         plotLines: [{
            color: '#FF0000',
            width: 1,
            value: 0
        }]
    },
Sebastian Bochan
  • 37,348
  • 3
  • 49
  • 75
  • What if it was like in the fiddle below and I had to touch the yAxis with the plotline? http://jsfiddle.net/saurjk/JWZ2S/ – saurjk Apr 22 '13 at 15:28