Chart Label Text Vertical

1. Application scenarios

When there are too many chart classifications and series, the horizontal display of the chart label text is more crowded, and it is hoped that the vertical display of the text can be realized. The effect is shown in the following figure:

JAR packages of 2020-11-02 and later versions already support setting the label vertical effect.

2. Implementation ideas

Use custom tags, then splice HTML styles in the returned tag values, and finally set to use HTML to parse the text content.

Note: This method does not support floating element charts and charts in decision reports.

1. Data preparation

Create a New General Report, create a new dataset ds1, the database query statement is: SELECT * FROM Sales_Volume

2. Report design

1) Add a Column Chart to the cell, and bind data as shown below:

2) In the chart properties panel, select Style>Label, check Use Label, then edit the custom return value, click Use HTML to parse the text content, and finally set the label position to the Inside. The custom code is as follows:

function(){  
    return "<div style='width:10px;line-height:12px;white-space:normal'>"+this.value+"</div>";
}

3. Effect preview

Save the report, click Pagination Preview, the effect is as shown in the application scenario.

Note: Mobile terminal is not supported.

The completed template can be found in:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Primary\Chart\Chart Label Text Vertical.cpt

Click to download the template:

Chart Label Text Vertical.cpt