Line-Wrapping Display of Chart Labels

Problem

For a label with long content, if you set the label inside a chart, the label will exceed the scope of the graphic, which affects the aesthetic appeal of the report, as shown in the following figure.

Solution

You can achieve a line-wrapping display for label texts by customizing the label.

Report Design

1. Create a general report and create a built-in dataset named Embedded1, as shown in the following figure.

2. Merge required cells, and insert a column chart, as shown in the following figure.

3. Select the column chart, choose Cell Element > Style > Label on the right attribute panel, tick Use Label, and enter the custom label code, as shown in the following figure.

The code is as follows:

function(){  var a = this.value.toString(); //Convert a logical value into a string and return the result.
var length = a.length; var b = parseInt((a.length)/2); // Divide the label into two parts and round it up.
var value= a.substring(0,b)+"<br>"+a.substring(b,length); //Display the former part, and display the latter part in the next line.
return value
}

Effect Display

1. PC

Save the report and click Pagination Preview. The following figure shows the preview effect.

2. Mobile Terminal

The completed template can be found in: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\NewColumnChart\Line-Wrapping Display of Chart Labels.cpt

You can download the example template: Line-Wrapping Display of Chart Labels.cpt