Implemente gridstack on react canvas js chart for dashboards

[fatemk]

Hello everyone,

I’m currently working on a react project, more specifically on the dashboard part, and I’m encountering a problem with the resizing of canvas js graphics. I’m using the gridstack library to both resize my graphics and move them around so that users can create their own personalised dashboards. I also use another library for charts which is apex chart and the resizing works perfectly unlike canvas js however I prefer to stay with canvas js because it can handle a large volume of data, which is not the case for apex chart.

Here’s an example with the 2 types of chart in gridstack :
https://codepen.io/Hulk15500/pen/wvbdwoR

Thank you in advance for your support.

• This topic was modified 5 months, 2 weeks ago by Vishwas R.
• This topic was modified 5 months, 2 weeks ago by fatemk.

[Vishwas R]

@fatemk,

Re-rendering the chart on resizing the grid should work fine in this case. You can re-render the chart either on resize or resizestop events. Please find the code-snippet below.

grid.on("resizestop", function(resizestop) {
    chart.render();
});

Please take a look at this updated pen for complete code.

Also, you seem to be using third-party CanvasJS React Charts package. We recommend you to use Official CanvasJS React Charts package.

—
Vishwas R
Team CanvasJS

[fatemk]

Many thanks for your great support, it’s works fine now.