Custom Rounded Corner and Column Width of Column Chart

1. Application scenarios

The rounded corner and width of the column in the column chart can be customized, as shown in the following figure:

2. Idea to achieve

Set the column width: select style > series > style in the property panel, fix the column width, and click Yes to enter the customized column width value.

Set rounded corner: select style > series > border in the property panel, and enter the value.

3.  Application Examples

The built-in component reuse function can be used in the decision report, and the component style can be quickly reused by directly replacing the data to realize the custom column rounded corner properties and width effects.

Component	describe	renderings
Gradient column chart with background color	1) This component is suitable for fresh style templates 2) Using auxiliary data, let each column display on the background color column of the same height, and display the data size more beautifully and directly
Ring Pie	1) This component is suitable for light-colored minimalist style templates 2) Use a circular pie chart to clearly show the proportion of each part

1. Data preparation

Create a new general report, add dataset ds1, and the SQL statement is: select * from sales_basic

2. Design report

1）Merge a range cell and insert the column chart, as shown in the following figure:

2）In the property panel, click data to bind column chart data, as shown in the following figure:

3）Select the chart, click style > Series in the property panel, click Yes for the fixed column width, enter a fixed value of 20, and enter 10 for the rounded corner, as shown in the following figure:

3. Effect preview

1）PC terminal

Save the template and click pagination preview. The effect is as follows:

2）Mobile terminal

Completed template, see %FR_HOME%/webapps/webroot/WEB-INF/reportlets/doc-EN/Chart/ColumnAndBar/rounded_width.cpt

Click download template:  rounded_width.cpt