Charts and graphs responsive

Support
#1

What’s the best way to make charts and graphs responsive within the web module? We are placing some to represent the data that’s displayed in the browse screen. However as the screen shrink they stay the same size and some are thereby hidden.

Thanks

#2

Hi
Could you give more details of the problem? As I have understood, the following can help.

If to set width and height of UI components in percents, they can change their size dynamically, following the browser window.
For example, in my project I have the following entity browse screen:


  <dsContext>
      .....
   </dsContext>
  <layout expand="vbox">
        <filter id="filter"
                applyTo="tasksTable"
                datasource="tasksDs">
            <properties include=".*"></properties>
        </filter>
        <vbox id="vbox">
            <chart:ganttChart id="ganntChart"
                              ....
                              height="100%"
                              width="100%">
							  .......
            </chart:ganttChart>
            <table id="tasksTable"
                   height="100%"
                   width="100%">
				   .....
             </table>
        </vbox>
    </layout>

The layout has expand=“vbox” property. It means, vbox takes all the free space left after location of the filter component.
Dimensions of ganntchart and tasksTable components are given in percents. That screen looks similar not considering the screen resolution and size of the browser window.
For more information about CUBA UI see the documentation: [url=https://doc.cuba-platform.com/manual-6.2/gui_framework.html?_ga=1.38715168.2030361064.1466500126]https://doc.cuba-platform.com/manual-6.2/gui_framework.html[/url]

Regards.