Area Chart

Also known as Area Graph

1. What is an Area chart?

Area chart combines a line chart with a bar chart to depict changes. Data points are displayed and connected by line segments. However, the region below the line is filled in with color. The chart then has layers because additional data are displayed below the lines and colored in a different shade.

When to use are chart?

In those following cases, a stacked area is recommended :

  • Breaking down values of the total value by groups

  • Comparison between groups

  • Total value is added up by groups' values.

2. How to build an Area chart with example

The area chart showcases the sales revenue split by region over time, presenting a visual representation of how revenue contribution from each region has evolved and fluctuated across different periods, allowing businesses to analyze regional performance trends and gain insights into the changing revenue dynamics over time.

  1. Click Click here to add your first chart

  2. In the menu, select Area to create an area chart

3. Area Chart Config

  1. Select the database you use to create suggested in the list

  2. Choose the table containing the data you use to create, then it will show you the list of fields included in the table

  3. Drag/drop or select the X-Axis value

  4. Drag/drop or select the Y-Axis value

  5. Drag/drop or select the Legend properties (optional)

  6. Drag/drop or select the Sorting field to sort out the data in the chart (optional)

  7. Drag/drop or select the Filters field to emphasize a specific data (optional)

  8. You can see the visualization of your chart on the left side and select Settings to change the element’s settings


You can change the title of the chart, choose the font, color and size of the name. You can also add the subtitle and change its format.


When you select Stack, it will give you a better understanding of how each categories's value contributes to the total value at any given point. When you change the stacking type to Percentage, you may want to display ratios without focusing on individual values.


Legend field contains the sub-categories that split each area into multiple area corresponding to the categories. Each area still represents the same measure. You can change its display name or type (column, line, area, lollipop).


You can change the legend position (top, bottom, middle), input the name, choose the font, color and size of the name.

  • X AXIS

When you turn on the X Axis, you can input the Prefix, Postfix and change their format. X Axix title can also be added and change format too.

  • Y AXIS

When you turn on the X Axis, you can input the Prefix, Postfix and change their format. X Axix title can also be added and change format too. If you turn on Gridlines, you can change the size and the display of the Gridlines (solid, dash, dot,...).


Data color can be set auto or you can choose your favorite colors.


If you turn the label on, you can choose its style to perform (percent, value, raw), choose the font, color and size of the label and its position.


You can change the background color of the chart.


When you hover over an area of the chart, a text box appears to display information about the data of that area. You can change the text color, font, and background.


Change the display unit, precision, and other functions

9. After building the chart visualization, click Add to create your chart.

10. Your chart will show up along with actions like sharing, editing, etc.

We hope that the above instructions will be useful to you. Let's have a look at our other articles to learn more about using other charts in data visualization with Rocket.BI.

Last updated