Help Creating a Graph Sheet and plotting Graph responsive

Hi All,

I am plotting a graph and I did plot a 2D lines inside rect. But the challenge I have is when screen width is reduced it isn’t shrinking. Am I missing something ? should I use Grid inside the rect ?.

In any screen size I want to keep the rows and colums the same and plot graph on the same. Any help on the same ?

rgds
Balaji

cc @DarraghBurke

Using DisplayGrid would be easier, but you’ll still need to recalculate the grid size when the screen is resized, since it only accepts values in px, not %

Hey there! Unfortunately, you cannot use viewport width and viewport height units in GUI. We only support “px” and “%”. Here is a simple fix: you can give the ADT an idealWidth and idealHeight and then specify the rectangle’s dimensions in pixels. It will automatically scale as the screen size changes.

GraphMesh | Babylon.js Playground (babylonjs.com)

This is what we call “adaptive scaling”: The Babylon GUI | Babylon.js Documentation

@DarraghBurke Why some lines are pale white ?. I see all are not of same color with idlewidth and height. Any inputs on the same ?

This is a limitation of the Canvas API, which Babylon GUI uses for rendering. If coordinates are not round integers, drawing will be blurred. Since we need to scale the lines here by some multiplier, it’s inevitable that some of them will not lie on perfectly round integer coordinates.

If you think about it, this makes logical sense - if you’re trying to paint a pixel at position (5.5,4), you should paint it with roughly half strength on (4,4) and on (5,4) to get the closest approximation.

You can increase the lineWidth of the lines to get more regular lines. If you set it to 2, your lines will always be at least 1px wide, meaning that you’ll always get at least 1 fully white pixel.