I am wondering how can i change the aspect ratio of the histogram saved in the root file. When I change the size of the div in which the plot is plotted the graphics is just stretched, and not rescaled properly,it looks like this:
If you have custom HTML layout and able to change div size interactively - you have to call resize function. See explanation in the JSROOT documentation
You also can use registerForResize function which automatically updates you drawing when browser window changes its size. See in JSROOT Reference
thanks. Yes, I have quite complicated HTML layout, the plot should be placed inside the table cell while table is placed inside tab structure. Since these elements have some predefined widths and styles I think this causes the problem with resizing. I tried both your suggestion but none of them has any effect. As a workaround in my JS function I created the div, placed it to the outermost part of HTML body, plotted my histo there (with no resizing) and then moved the wholed div to the correct place in the table. It works fine, but it is hacking rather than solving resizing issue…
In some situation JSROOT not able correctly define pixel size of HTML element where drawing is performed. You can also try to call resize(dom, { width: 600, height: 400 }) - where width and height should be reasonable values for you layout.
And if nothing helps - can you provide reproducer that I can check myself?
I prepared the reproducer. I also don’t quite understand why the drawer object inside tab plot is created with display:none, maybe that is also related to this issue. In the example you clearly see that drawing is rescaled properly when produced outside the tab layout, but is only streched in drawing_cov. Thanks for your help.
I do not see how this affect the resulting plot scale. I set it consistently in both drawing in the example code and for the div outside the tab it behaves fine, while for the div inside tab it doesn’t work as expected. My goal is to have div with initial size 0px 0px inside tab (plot_def class in styles.css) and once the plot is finished (because producing the plot can take some time) the div size is re-set to 2000px 600px and plot is printed there. I tried setting all divs to flex but this does not solve the issue.
Just to be clear I am not interested in flexibly changing the size of the plot when browser window is shrinked, but my concern is that plot is streched (graphics on axes is not rescaled but just streched) even on the full screen window - and the problem is somehow related to the fact that it is inside tab…
To be able use JSROOT properly inside any other HTML elements one should have div element with properly defined geometry - width and height. Most ease way to check this - just set background color of the div and see how page behaves when resizing web browser. If it works properly - then JSROOT drawing most probably will behaves inside such div correctly.
I am not familiar with classical HTML tables. So you should find layout that fit your needs.
You can check how tabs display works in JSROOT. This is TabsDisplay class in modules/gui/display.mjs file. It is not using html table, but rather composes different div elements with display: flex css attribute.
