---
title: "MultiVariate Area"
description: "A multi-panel area chart for visualizing trends across multiple categorical dimensions, optionally grouped and arranged via a configurable grid layout."
group: Charts
tags: [Visualization, Area Chart, Multi-Panel, Categorical, Numerical]
---
import { Aside, Steps } from '@astrojs/starlight/components';
# MultiVariate Area
The **MultiVariate Area Chart** is a flexible visualization designed for comparing numeric trends across multiple categories within a grid-based layout. It supports optional grouping, dynamic axis orientation, heatmap overlays, and advanced legend, tooltip, and grid configurations.
**Key Features:**
- Supports multiple **categorical Axis dimensions**.
- Optional **Group dimension** for multiple filled area series within each axis.
- Configurable **multi-grid layout** with adjustable rows, columns, and margins.
- Flexible **line orientation** (Horizontal / Vertical).
- Optional **heatmap visual map overlay**.
- Customizable **tooltip and legend formatting**.
- Drilldown interactions on data points.
**Use Cases:**
- Trend comparisons across multiple categories or grids.
- Stacked or grouped area chart visualization.
- Grid-based comparative analysis with categorical and group splits.
---
## ⚙️ Setup
1. Add a **MultiVariate Area Chart**widget from the chart library onto your designer workspace.
2. Select the chart.
3. Go to the [Widget Configuration](/insights-v8/guide-to-infoboard-designer/customize-panel/configure/) tab in the Customize panel.
4. Under the Configuration tab, select the [Basic Configuration](/insights-v8/guide-to-infoboard-designer/customize-panel/configure/#basic) option to access the essential settings for the multi variate area chart.
5. Select the [Source](/insights-v8/guide-to-infoboard-designer/customize-panel/setup/#sources) which the chart will pull the data from the option.
6. Map:
- **[Value](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** — Numeric measure for bar length.
- **[Axis](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** — One or more categorical dimensions (minimum 1, up to 10).
- **[Group](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** *(optional)* — Additional dimension for grouped bars within each axis.
7. Optionally add a **Date** field for time-based filtering.
8. Enable **Hide Zero Values** to omit symbols with zero values if needed.
---
## 📊 Basic Configuration
| Configuration Item | Description |
|:------------------|:------------------------------------------------|
| **[Source](/insights-v8/guide-to-infoboard-designer/customize-panel/setup/#sources)** | Source providing the data for measures and dimensions. |
| **[Value](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** | Numeric measure representing bar size. |
| **[Axis](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** | One or more categorical fields for splitting grids. |
| **[Group](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** *(optional)* | Additional dimension for grouped bars. |
---
## 🎨 Chart Customizations
| Category | Options & Description |
|:------------|:------------------------------------------------|
| **[General](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#general)** | Modify the chart’s general appearance, including the background color, borders, shadows, and drill-out choices.
| **[Title](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#title)** | Enable and customize chart title text, alignment, font, and color. |
| **[Sorting](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#sorting)** | Define custom sort orders for categories along the X and Y axes. |
| **[Grid](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#grid)** | Adjust chart margins, grid spacing, and padding around the matrix area. |
| **[Legend](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#legends)** | Toggle visibility, position, orientation, and customize legend labels and icons. |
| **[HeatMap](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#heatmap)** | Configure a visual color map to represent value intensity with a gradient. |
| **[Categorical Axis (X, Y)](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#categorical-axis)** | Customize axis labels, intervals, rotation, visibility, and range sliders for both axes. |
| **[Numerical Axis](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#numerical-axis)** | Value axis scaling, label formatting, log scales. |
| **[Series](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#series-customization)** | Area fill, line color, symbols, and style settings. |
| **[Tooltip](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#tooltip)** | Control tooltip content, formatting, and visibility on hover. |
| **[Others](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#other-options)** | Orientation toggle (Horizontal / Vertical). |
---
## 📊 Example Visualization
