Page 1 of 1
Axis Grid Line Color
Posted: Fri Jul 03, 2015 1:01 pm
by 17769562
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
Re: Axis Grid Line Color
Posted: Fri Jul 03, 2015 1:06 pm
by narcis
Hi Mark,
Please try what Yeray Alonso suggested
here.
Re: Axis Grid Line Color
Posted: Fri Jul 03, 2015 11:17 pm
by 17769562
Tried all that - no avail!
Perhaps you can post a demo that works?
Mark
Re: Axis Grid Line Color
Posted: Mon Jul 06, 2015 9:50 am
by 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 13946 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 13943 times