Area
The Area Chart is a variation of the line chart where the area between the line and the axis is filled with color or shading.
It helps visualize trends over time or categories while emphasizing the magnitude of values.
Like Line charts, it supports both Horizontal (Category X, Value Y) and Vertical (Value X, Category Y) orientations.
Use cases:
- Displaying cumulative values over time.
- Visualizing contributions of multiple categories to a whole.
- Highlighting volume changes and peaks within a data series.
⚙️ Setup
- Drag the Area Chart widget from the chart library onto your designer workspace.
- Select the chart.
- Go to the Widget Configuration tab in the Configuration panel.
- Under the Configuration panel tab, select the Basic Configuration option to access essential settings for the Area Chart.
- Select the Source from which the chart will fetch its data.
- Map:
- Measure (Value) — Numeric value representing the Y (or X) axis value.
- Dimension (Axis) — Categorical or sequential value for the primary axis labels.
- Group — (Optional) Categorical value to split the area series.
- Optionally add a Date field for time-based filtering.
📊 Basic Configuration
| Configuration Item | Description |
|---|---|
| Source | The data source to query for chart values. |
| Measure (Value) | Numeric value plotted along the Y (or X if vertical) axis. |
| Dimension (Axis) | Categorical or sequential value for primary axis labels. |
| Group | (Optional) Grouping field to split the area lines into multiple series. |
| Date Field (optional) | Enables date-based filtering and drilldown capability. |
🎨 Chart Customizations
| Category | Options & Description |
|---|---|
| General | Theme, background, border, and interactivity options. |
| Title | Chart title, font, alignment, and visibility settings. |
| Sorting | Control sorting of categories or series order. |
| Grid | Manage padding and chart grid layout. |
| Legend | Show/hide, position, and format for series legends. |
| HeatMap | Apply color gradients based on value ranges. |
| Categorical Axis | Customize category axis labels, rotation, and intervals. |
| Numerical Axis | Adjust value axis scale, formatting, and log scale. |
| Series | Control fill color, border color, symbols, smoothing, and data labels for the area lines. |
| Tooltip | Tooltip content, format, and triggers. |
| Others | Set Orientation between Horizontal (Category X, Value Y) and Vertical (Value X, Category Y). |
📊 Example Visualization
