Area Chart

Application Scenario

Area charts can emphasize the magnitude of quantity changes over time and draw attention to the trend of total values. They are suitable for displaying changes over a time dimension or presenting cumulative data.

The stacked area chart and the percentage stacked area chart can display the relationship between the part and the whole.

Chart Feature

1. The area chart can display the changing trend in a dimension, and compare multiple sets of data in the same dimension, which is suitable for displaying a large dataset.

2. The area chart is not suitable for comparing the values of different categories.

Data Preparation

Choose File > New General Report in the upper left of the designer, and create a built-in dataset. You can design the field and the data as shown in the following figure.

Chart Insertion

Merge required cells, click the Insert Chart icon on the upper toolbar, select Area Chart, and click OK, as shown in the following figure.

Chart Data

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

Chart Style

Chart Title

Choose Style > Title on the chart attribute configuration panel, and set the title content to Product Sales Trend in 2020 - Area Chart, as shown in the following figure.

Chart Legend

Choose Style > Legend on the chart attribute configuration panel, and set Position to Top, as shown in the following figure.

Chart Label

Choose Style > Label on the chart attribute configuration panel, tick Use Label, and set the Overlap Adjustment item to On, as shown in the following figure.

The following figure shows the effects of enabling and disabling Overlap Adjustment.

Chart Series

The following figure shows the series setting items of the area chart.

1. Line: You can set the line style to the solid line or none, set the line width, set the Display item to Normal, Vertical, or Curve, and set the Null Value Break to On. The following figure shows the effect.

2. Type in Mark Point is set to None by default. You can select one type from the eight built-in types in General, or you can upload an image in Custom.

3. You can set Fill Color (set to Series Color by default) in Area to any color. The value of Opacity is set to 15% by default, which cannot be changed.

The above only explains some of the settings of the area chart. For more details, see Chart Series.

Chart Axis

To display a better effect, the minimum value of the Y-axis in this example is set to 40, as shown in the following figure.

Note:

The position of the X-axis labels cannot be adjusted at present.

Chart Prompt

You can tick Display All Series in Prompt, as shown in the following figure.

When Display All Series is unticked for the area chart with multiple series, the prompt points of different series in the chart will be displayed separately. The following figure shows the effect.

After Display All Series is ticked, the prompt points of different series will be displayed simultaneously on a straight line. The following figure shows the effect.

Note:

When there is only one series in the chart, the straight line will also be displayed after you tick Display All Series.

Effect Display

PC

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

Mobile Terminal

The template can be previewed on both the DataAnalyst app and the HTML5 terminal. The following figure shows the effect.

For details, you can download the template Area Chart.cpt.