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 show charts on your website.

More »

 

Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

 

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

More »

Hi Richard,
I have one more issue to resolve though:

I have very long labels on my horizontal bar chart and I am forced to break them down into multiple lines, which forced me to dynamically increase bottom margin of the chart.
I am using background horizontal lines on those charts and when bottom margin is increased background is not squashed as the rest of the chart, leaving buttom lines below the X-axis
Do you have any suggestions?

Setup:
backgroundGrid: true,
backgroundGridVlines: false,
backgroundGridBorder: false,

Thanks,
Alek

Regarding very long labels on an HBar chart here's an alternative to using long labels - use short labels and add a key:

https://codepen.io/rgraph/pen/XWVJxJM

Regarding the background grid - it's cached in order to increase the performance of animations.

When you redraw the HBar chart you can do this:

RGraph.cache = [];

Which effectively clears the cache. You might also be able to do this using events (though I haven't tested this):

hbar = new RGraph.HBar({
    id: 'cvs',
    data: [4,8,6,4,5,8,8],
    options: {
    }
}).on('beforedraw', function (obj)
{
    RGraph.cache = [];
}).draw();

RGraph.cache = [] worked! I didn't use it inside of event though
Thanks so much for quick replies
I am very new to RGraph, but really like it's functionality, flexibility and dynamic nature