Knowledge Base (Display) Knowledge Base (Display)

How to automatically adjust charts size

How to automatically adjust charts size

This article is deprecated: from version 3.1, SVG charts are automatically resized when they are displayed in a web-browser if these conditions are met: set report layout preference to "auto" in Eclipse designer, enable visioneo preference "Chart resizing"  in your portlet window, and make sure all BIRT elements have a width in percent unit (both in report body and report master page). This report-design is included in Visioneo distributions, please use it for reference.
This article describes a simple way to adjust charts size to the reportlet fragment window  

Reportlet fragment size

Your reports can use the reportlet window width and height set in the preferences mode:

It is overall useful for charts: in visioneo report samples, the radar chart and the breakdown sales chart use the current window width and height to automatically adjust their size. Furthermore, the breakdown sales chart displays a title only if this width is sufficient.

It can be achieved with a very simple javascript code in the 'onRender' event of your chart. Have a look with Eclipse Birt designer on the relevant .rptdesign files for a concrete example.

Note cross-tables & tables items are not really concerned: in Birt designer, if you select "auto Layout preferences", these items should exactly fit to the reportlet fragment width.

Get the reportlet size in your birt report

To use this feature you must declare hidden parameters in your report: __width and __height. This is of course facultative, and you should not add these parameters if they are not used in a report. Once they are declared, the reportlet populates automatically their values, and they can be used in scripts like any other report parameter:






Furthermore, adding these parameters in a report warns the reportlet engine it must create different cache entries each time this report has a different size:

Adjust your charts

In Eclipse Birt designer, select a chart -> Script tab -> onRender event.

You can then invoke a function such the one below in this onRender event :

Note the coefficients 1.35 and 1.38 applied to width and height. Although the unit is 'pixel' on both sides, without these ratio the chart will be larger than the reportlet window. These coefficients are the values used in this sample reports but they are not constant, it will depend for example if you use margins on your masterpage or not, etc. Tune them to fit exactly in your reportlet.

Render-only parameters

Most of the time, __width and __height parameters are only used at render time: whatever the report size is, datasets and general layout won't change. Therefore it would be clunky to generate a new report each time the size is changing.

For example, when a user is switching between a standard/maximized view, it would be a shame to wait long seconds just because the report is now maximized. A feature has been implemented for this kind of requirement: it is possible to specify that a parameter is only used at render time, by adding to the parameter(s) concerned a specific user property:


In the Eclipse Birt designer, the user properties can be set in the advanced properties dialog:

If the __width and __height parameters have this specific user property set to true, then whatever the reportlet window dimensions are the same "rptdocument" is used.  Therefore, if you render a chart report and then maximize it, the maximization will be very fast .
Tags: developers
Average (0 Votes)
Most Recent
Toolbar portlet 01 April 2015
Secured parameters 02 December 2014