Chart Title/Axis/Label Text Wrap

1. Problem description

Sometimes it is hoped that the text content of the chart title, axis, and label can be displayed in a new line, so how to achieve it?

The default effect:

Expected effect:

2. Implementation ideas

Add a line break tag to the text<br/>, and Use HTML parsing text content to achieve line break, take the title as an example, as shown in the following figure:

1. Data preparation

Create a New Normal Report, add the built-in data set Staff Assignments, and record the class and the number of people separately, as shown in the following figure:

2. Insert chart

Take the cell chart as an example, merge a piece of cells and insert a Column Chart, as shown in the figure below:

3. Binding data

Select the chart and bind the chart data, as shown in the following figure:

4. Set line break

1) Add formula for title:'Beijing Zhongguancun No. 1 Middle School'+'<br/>'+'Class one, Grade seven Staff Distribution Table'+'<br/>'+'(2017)', and choose Use HTML parsing text content, as shown in the figure below:

2) Choose Custom label text, and choose Use HTML parsing text content, as shown in the following figure:

The JavaScript code is as follows:

function(){ return this.category+'<br/>'+this.seriesName+':'+this.value;}

3) Add the formula for the title of the Y axis:'Number of people'+'<br/>', and choose Use HTML parsing text content, as shown in the following figure:

5. Effect preview

1) PC

Save the report, click Pagination Preview, the effect is shown in the following figure:

2) Mobile

Both App and H5 previews are supported at the same time, and the effect is shown in the figure below:

The completed template can be found in:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Advanced\Chart\ColumnChart\Chart Content Wraps.cpt

Click to download the template: 

Chart Content Wraps.cpt