• 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 16 years old) and has a wealth of features making it an ideal choice to use for showing charts on your website.

More »

 

Get the latest version of RGraph (version 6.20, 1st December 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 »

 

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.