Line-Wrapping Display of Chart Titles/Axes/Labels

Problem

In some cases, you may want the text content of chart titles, axes, and labels to be wrapped and displayed on multiple lines. How can you achieve that?

Default Effect

Expected Effect

Implementation Method

Add a line break tag <br/> to the text and use HTML to parse the text content to achieve the line break. Take the title as an example, as shown in the following figure.

Data Preparation

Create a general report and add a built-in dataset Student Distribution which records classes and numbers of students respectively, as shown in the following figure.

Chart Insertion

Taking the cell chart as an example, merge required cells, and insert a column chart, as shown in the following figure.

Data Binding

Select the chart, and bind data to it, as shown in the following figure.

Line Break Setting

1. Add the formula 'Student Distribution Table'+'<br/>'+'(in 2017)' to the title, and select Use HTML to Parse Text Content, as shown in the following figure.

2. Select Custom for the label text and select Use HTML to Parse Text Content, as shown in the following figure.

The JavaScript codes are as follows:

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

3. Add the formula 'Quantity'+'<br/>'+'(Number of Students)' to the title of the Y axis, and select Use HTML to Parse Text Content, as shown in the following figure.

Effect Display

1. PC

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

2. Mobile Terminal

The report can be previewed on the DataAnalyst APP and the H5 terminal, as shown in the following figure.

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

For details, you can download the example template: Line-Wrapping Display of Chart Contents.cpt