Charts cannot be scaled when increasing the container size - Official support forum

About

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

New datagrid in v6.21

In version 6.21 a new datagrid object has been added. This makes it easy to add static or dynamic data tables to your pages. It can be used whether you use the canvas or SVG libraries or entirely standalone.

Download

Get the latest version of RGraph (version 6.21, 10th April 2025) 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.

Charts cannot be scaled when increasing the container size

I tried:

<script>

function graf(){
new RGraph.SVG.Bar({...}).wave();
}

const resizeObserver = new ResizeObserver((object) => {

console.dir('...' );
object[0].target.innerHTML = '';//...optional
graf();
});

resizeObserver.observe(document.getElementById('chart-container' ) );
</script>

Each time graf() is called again, the graph and its SVG tag disappear from the HTML document. It doesn't matter whether innerHTML cleanup is used.

Are you trying to change the size based on the screen size? If so you can use the responsive feature for that. Read about that here:

https://www.rgraph.net/canvas/responsive.html

It's in the canvas section of the website but does apply to SVG charts too.

Are you trying to change the size based on the screen size? - No by changing div container.

When I changing DIV console('...') is called - which means the action is caught correctly - then graf() must be called, then new RGraph.SVG.Bar({...}).wave(); must be called, but instead new chart is made it disappears and the SVG container disappears too from document. No allert is generated, no error, just gone and only console('...') is repeated...

After some conversation on Facebook about this issue this was the result:

----------8<----------

Thank you for sending me the code. I've created a test page on CodePen that resets the object every time the div is resized. I think that you could maybe combine this with the responsive function, which is documented here:

https://www.rgraph.net/canvas/responsive.html

So the marginInner setting is changed to create fatter bars when needed. Here's the codePen link:

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