MENU
.net Powerful JavaScript charts
About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to use for showing charts on your website.

More »

 

Download
Get the latest version of RGraph (version 6.19, 28th September 2024) from the download page. You can read the changelog here. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

Download »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£129) commercial license available.

More »

Issue with the positioning of the X-axis for a Line chart


Posted by Joachim at 14:10 on Tuesday 8th October 2024 [link]
Hi,
I stuck with a problem caused by positioning of x-axis, E. g. If you have a line chart with array of data [-0.39,-0.64,1.33,2.91] the grid line are perfectlicly positioned but the x-axis is not placed on y=0 but below y=0.
Is this a bug?
Attached image:
Attached image

Posted by Richard at 17:58 on Tuesday 8th October 2024 [link]
Hi there,

This has to do with the scale that's being generated from the range that your maximum and minimum values result in. If you add decimals with:

yaxisScaleDecimals: 1

You will see it more clearly. What you can do is give a range that results in a maximum/minimum range of 5 - or something that divides into 5 nicely. Eg a minimum of -3 and a maximum of 7 - giving a range of 10.

Another way to do it if you want a range of something other than 10 is to change the number of labels on the Y-axis and also the number of horizontal grid lines on the chart. This is what the second example does - as you can see there's a range of 8 - 5 to negative 3.

https://codepen.io/rgraph/full/bGXwKVJ

HTH

Posted by Joachim at 11:33 on Thursday 10th October 2024 [link]
hi,

Would be nice, if I could force to put x-axis onto the y-minmum at the bottom instead of
the y=0 point. So I tried option axisPosition="bottom" but this caused, x-axis is not to be drawn at all. I there a way to change this behaviour e.g. I could install a local patch for this?    

Posted by Richard at 13:31 on Thursday 10th October 2024 [link]
If I understand correctly, you could do that by drawing a custom set of axes using the drawing API objects like this:

https://codepen.io/rgraph/full/bGXwKVJ

Posted by Joachim at 14:04 on Friday 11th October 2024 [link]
Hello Richard,

Thank you for your help. Your solution works fine. There is only one minor problem. The background grid does not fit exacly the new x-axis tickmarks (same problem with your suggestion).
I could not find out, howto fix this.

Posted by Richard at 17:40 on Friday 11th October 2024 [link]
OK I've updated the example - the property you want here is xaxisTickmarksCount and in the example I've set it to 6.

https://codepen.io/rgraph/full/bGXwKVJ

Posted by Joachim at 18:15 on Friday 11th October 2024 [link]
Hi,

this fixed it - thank you!


[Replies are closed]