Axis Grid Line Color

[amjonas]

How does one change the color of the lines of the major grid on an axis?

setting "axis.grid.format.fill" affects the banding - quite neat!
setting "axis.grid.format.stroke.fill='#000000'" doesn't seem to work!

I'm trying to make them black!

Kind regards

Mark

[Narcís]

Hi Mark,

Please try what Yeray Alonso suggested here.

[amjonas]

Tried all that - no avail!

Perhaps you can post a demo that works?

Mark

[Yeray]

Hi Mark,

If you look at Axes example here, you can see how to activate/deactivate the grids of all the axes:

Code: Select all

function setGrids(value) {
  Chart1.axes.left.grid.visible=value;
  Chart1.axes.top.grid.visible=value;
  Chart1.axes.right.grid.visible=value;
  Chart1.axes.bottom.grid.visible=value;
}
...
<input type="checkbox" id="grids" onclick="setGrids(this.checked); Chart1.draw();" checked>Grids<br/>

To see the axis grid color clearly, I've hidden the grid of all the axes except for one. Then, I've added this to the draw() function in that example before Chart1.draw():

Code: Select all

  Chart1.axes.left.grid.format.stroke.fill="black";
  Chart1.axes.top.grid.visible=false;
  Chart1.axes.right.grid.visible=false;
  Chart1.axes.bottom.grid.visible=false;

left_grid_black.png (76.14 KiB) Viewed 11948 times

Or on "green":

Code: Select all

  Chart1.axes.left.grid.format.stroke.fill="green";
  Chart1.axes.top.grid.visible=false;
  Chart1.axes.right.grid.visible=false;
  Chart1.axes.bottom.grid.visible=false;

left_grid_green.png (76.9 KiB) Viewed 11945 times