Axis Grid Line Color

TeeChart for Javascript for the HTML5 Canvas
Post Reply
amjonas
Newbie
Newbie
Posts: 9
Joined: Fri Jun 20, 2014 12:00 am

Axis Grid Line Color

Post by amjonas » Fri Jul 03, 2015 1:01 pm

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
Site Admin
Site Admin
Posts: 14730
Joined: Mon Jun 09, 2003 4:00 am
Location: Banyoles, Catalonia
Contact:

Re: Axis Grid Line Color

Post by Narcís » Fri Jul 03, 2015 1:06 pm

Hi Mark,

Please try what Yeray Alonso suggested here.
Best Regards,
Narcís Calvet / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Image Image Image Image Image Image
Instructions - How to post in this forum

amjonas
Newbie
Newbie
Posts: 9
Joined: Fri Jun 20, 2014 12:00 am

Re: Axis Grid Line Color

Post by amjonas » Fri Jul 03, 2015 11:17 pm

Tried all that - no avail!

Perhaps you can post a demo that works?

Mark

Yeray
Site Admin
Site Admin
Posts: 8973
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Axis Grid Line Color

Post by Yeray » Mon Jul 06, 2015 9:50 am

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
left_grid_black.png (76.14 KiB) Viewed 5639 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
left_grid_green.png (76.9 KiB) Viewed 5636 times
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

Post Reply