BiVariate Area Chart
A BiVariate Area Chart is a multi-panel (small multiples) visualization combining area charts with grid layouts split by a Split dimension and optionally grouped by a Group dimension. Each grid represents a distinct subset of data while maintaining consistent axes for easy comparison.
It supports both Horizontal (standard area chart with X-axis as categories) and Vertical (area flows along Y-axis categories) orientations.
Key Features:
- Multi-grid (small multiples) area charts split by a Split dimension.
- Optional Group dimension for multiple filled area plots in each grid.
- Toggle between Horizontal and Vertical orientation.
- Custom area colors, opacity, line styles, and point markers.
- Interactive zoom and tooltip support for every panel.
- Heatmap coloring based on value ranges.
- Supports sorting, legends, and pivot-based group breakdown.
Use Cases:
- Sales or revenue area comparisons across regions.
- Customer count or activity growth per product category.
- System performance metrics split by device type or region.
- Sensor trends split by equipment and grouped by status type.
⚙️ Setup
- Add the BiVariate Area Chart widget from the chart library onto your designer workspace.
- Select the chart.
- Go to the Widget Configuration tab in the Customize panel.
- Under the Configuration tab, select the Basic Configuration option to access the essential settings for the bi variate area chart.
- Select the Source which the chart will pull the data from the option.
- Map:
- Value (Measure) — The numeric value plotted along the Y-axis (or X if vertical).
- Axis (Dimension) — The categorical or date/time value for the independent axis.
- Split (Dimension) — The dimension used to split charts into grids.
- (Optional) Group (Dimension) — Categorizes multiple lines within a panel.
- Optionally add a Date field for time-based filtering.
- Enable Hide Zero Values to omit symbols with zero values if needed.
📊 Basic Configuration
| Configuration Item | Description |
|---|---|
| Source | Source providing the data for measures and dimensions. |
| Value | Numeric measure for each area chart data point. |
| Axis | Independent axis (categories, dates, etc.). |
| Split | Splits data into multiple area chart grids. |
| Group (optional) | Groups multiple filled areas within a single grid. |
🎨 Chart Customizations
| Category | Options & Description |
|---|---|
| General | Modify the chart’s general appearance, including the background color, borders, shadows, and drill-out choices. |
| Title | Enable and customize chart title text, alignment, font, and color. |
| Sorting | Define custom sort orders for categories along the X and Y axes. |
| Grid | Adjust chart margins, grid spacing, and padding around the matrix area. |
| Legend | Toggle visibility, position, orientation, and customize legend labels and icons. |
| HeatMap | Configure a visual color map to represent value intensity with a gradient. |
| Categorical Axis (X, Y) | Customize axis labels, intervals, rotation, visibility, and range sliders for both axes. |
| Numerical Axis | Value axis type, log scale, and value formatting. |
| Series | Configure area fill, border lines, markers, opacity, and colors. |
| Tooltip | Control tooltip content, formatting, and visibility on hover. |
| [Others] | Change chart Orientation between Horizontal and Vertical. |
📊 Example Visualization
