Area Chart

Application Scenario

The area chart refers to the graph emphasizing the extent of the change in quantity over time, which can be used to draw people's attention to the trends in aggregate values.

The area chart is suitable for displaying the change in the time dimension and the accumulated 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 display the large dataset.

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

The following will use an example to introduce how to create a area chart and what attributes this chart has.

For more details about chart attributes, see Chart Data, Chart Style, and Chart Special Effect.

Data Preparation

Choose File > New General Report in the upper left of the designer, and create a built-in dataset on the lower left of the designer. 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.

Choose Style > Legend on the chart attribute configuration panel, and set Position to Top.

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

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

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 Diplay 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.

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.

Chart Prompt

You can tick Display All Series in Prompt.

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