Skip to content

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

  1. Drag the Area Chart widget from the chart library onto your designer workspace.
  2. Select the chart.
  3. Go to the Widget Configuration tab in the Configuration panel.
  4. Under the Configuration panel tab, select the Basic Configuration option to access essential settings for the Area Chart.
  5. Select the Source from which the chart will fetch its data.
  6. 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.
  7. Optionally add a Date field for time-based filtering.

📊 Basic Configuration

Configuration ItemDescription
SourceThe 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

CategoryOptions & Description
GeneralTheme, background, border, and interactivity options.
TitleChart title, font, alignment, and visibility settings.
SortingControl sorting of categories or series order.
GridManage padding and chart grid layout.
LegendShow/hide, position, and format for series legends.
HeatMapApply color gradients based on value ranges.
Categorical AxisCustomize category axis labels, rotation, and intervals.
Numerical AxisAdjust value axis scale, formatting, and log scale.
SeriesControl fill color, border color, symbols, smoothing, and data labels for the area lines.
TooltipTooltip content, format, and triggers.
OthersSet Orientation between Horizontal (Category X, Value Y) and Vertical (Value X, Category Y).

📊 Example Visualization

Area chart