• DOWNLOAD
• SVG
• CANVAS
• DEMOS
• BLOG
• VIDEO
• ABOUT
• LICENSE
• SUPPORT

• download
• svg
• canvas
• demos
• blog

• video
• about
• license
• support

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

More »

 

Version 7.20 (released in June 2026) is the latest version of RGraph and the major change in this version is an update to the default values of properties making for better looking charts without having to set any properties. Read more about this and other changes in the changelog.

Download »

 

Get the latest version of RGraph (version 7.20, 9th June 2026) 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 »

 

These are the latest support forum posts that have been posted or updated.

---

16th June, Rachel
I have a question about the 3D Bar chart

---

12th June, Marco
Should I use SVG or canvas for the charts on my website?

---

9th June, Richard
New version of RGraph: version 7.20

---

3rd June, Patrick
Question about installing RGraph

---

1st June, Ouja
How do I add a click event to a bar in my Bar chart?

---

Support forum »

 

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 »

Hello, I wonder about 3D Chart (especially bar).

Is any another way for control Margin Bottom of chart without properties.marginBottom?

I want to control ThreedAngle without marginbottom.

Because when I set 3d chart without marginBottom,

The bottom of chart and Yaxis Lables are cutting like img file.

I also try to fix RGraph.bar.js, but it's not easy to fix

There are some properties that you could use for controlling the 3D angle and they're on the Bar chart docs page in the miscellaneous section:

https://www.rgraph.net/canvas/bar.html#miscellaneous-properties

These properties are:

variantThreedAngle
variantThreedOffsetx
variantThreedOffsety
variantThreedXaxis
variantThreedYaxis
variantThreedXaxisColor
variantThreedYaxisColor


And there's a demo of changing the angle of the 3D chart here:

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

Also, if you add a CSS border to the canvas tag (or div tag in the case of SVG charts) then it will be clearer where the boundaries of the tag are. For example:

<canvas id="cvs" width="700" height="300" style="border: 1px solid gray"></canvas>

Or in the case of SVG:

<div id="cc" style="width: 700px; height: 300px; border: 1px solid gray"></div>

Thank you for your reply.

I also wonder how to control marginBottom without properties.

For example, in RGraph.bar.js,

//codeline 125~
if (properties.variantValue === '3d') {
if (properties.textAccessible) {
} else {

this.context.setTransform(1,properties.variantThreedAngle, 0, 1, 0.5, 0.5);
}
}




I think this.context.setTransform() makes angles for 3D chart.

In here, I'm looking for a way to control marginBottom of the chart.

I also try to this.context.roate(Math.PI/ 180 * degree),

It's working, but too hard to calculate every degree for chart.

Is it possible to control marginBottom or angle without properties?

Thank you for your helping.

The only way to control the margin and angle is by using the properties - ie:

marginBottom
variantThreedAngle

Why don't you want to use the properties? Is this chart not what you want?

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

Thank you for your reply.

When a developer can modify a chart, you can use the marginBottom property to modify the bottom of the 3d chart to cut off,

What should I do when I can't modify the chart file?

I have to set the value of the marginBottom, but the bottom of the 3D chart is not cut off

Even if I don't set the marginBottom value, I'm looking for a way because I don't want the chart to cut out when the value of variatnThreadAngle is 0.1 default.

The marginBottom value is set to 35 by default,
Isn't it weird that the bottom of the chart is cut off unconditionally when I set it on a 3D chart?

So I'm looking at the Rgraph.core.js or the Rgraph.bar .js file,

I asked if there was a proper way to fix it.

It's not weird - it's just necessary. The default marginBottom value is 35 which accommodates most charts and provides space for the labels. 3D Bar charts are different though - because the chart then becomes angled (which you change if you want like I showed you) you need more space at the bottom to accommodate this. Hence the need to increase the marginBottom value.

I could look into automatically increasing the bottom margin when 3D charts are requested and the value hasn't been changed by the user since it always needs increasing with 3D charts.

For the moment though - you will need to increase the marginBottom or change the variantThreedAngle to 0.