Vertical and Curve Area Chart

1. Application scenarios

Sometimes users want to change the line type of area map to vertical or curve, so how to set it to achieve the effect as shown in the figure below?

Vertical area chart:

Curve area chart:

2. Implementation ideas

In the chart property panel, under Style > Series, you can modify the display, as shown in the following figure:

1. Data preparation

Create a new general report, add the built-in datasetEmbedded1, and record the learning time in a week, as shown in the figure below:

2. Insert chart

Merge a range of cells, and click Insert >Cell Element > Insert Chart in the designer menu bar;

Select Area Chart, as shown in the following figure:

3. Binding chart data

Select the area chart, select the Data in the chart property panel on the right, and the settings are as shown in the following figure:

4. Setting chart style

1) Select Style > Title to set the content of the title, as shown in the following figure:

Note: similarly, the title of curve area chart is modified as curve area chart, I used Vertical and curve Area Chart in the template.

2) Select Style > Series > Line > Display, and select Vertical, as shown in the following figure:

3) If it is a graph, the steps are the same as above. Select the Curve Line, as shown in the figure below:

5. Effect preview

1) PC terminal

Save the template and click Pagination Preview. The effect is as follows:

Vertical area chart:

Curve area chart:

2) Mobile terminal

Vertical area chart:

Curve area chart:

The completed template is shown in: %fr_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\LineChart\VCAreaChart.cpt

Click to download the template: 

VCAreaChart.cpt