JSXGraph NumberLine, React&Storybook: How to keep the aspectratio constant (1:1) b-n horizl and vert units (x and y scaled eq-ly) for a respons dsn?

Question

JSXGraph Number Line using React and Storybook: How to keep the aspect ratio constant (1:1) between horizontal and vertical units (which means the x and y axes are scaled equally) for a responsive design when the board's height is set to 400px, and the width is set to 100%? I need to figure out the JSXGraph number line scaling so I can have rendering be correctly proportioned (I need the ratio between horizontal and vertical unit sizes be constant 1:1), without needing square width and height dimensions. Probably, this involves explorations of svg viewbox, or calculating and applying dynamic aspect-ratio?

Was trying to utilize 'keepAspectRatio: true' attribute but the number line extends its bounds upon resizing the screen which is not acceptable. Please advise possible solution

Answer 1

One possible solution in plain JavaScript would be to start a ResizeObserver.

In its event listener one can determine the actual size of the div which hosts the JSXGraph board. This can be used in a call of

board.setBoundingBox([l, t, r, b], true);