---
title: "Inverted Area Chart"
description: "A dual-axis area chart where two value series are plotted with one value axis inverted, emphasizing comparative insights between opposing trends."
group: Charts
tags: [Visualization, Chart, Dashboard, Area, Comparison, Dual Axis]
---

import { Aside, Steps } from '@astrojs/starlight/components';

# Inverted Area Chart

The **Inverted Area Comparison Chart** is a specialized area chart used to compare **two numeric measures** against a common category axis.  
One measure is plotted on the **left Y-axis**, and the other on the **right Y-axis**, with the second axis inverted.  
This layout is useful for visualizing opposing trends or contrasting values within the same chart canvas.

It supports a **Horizontal (Category X, Value Y)** orientation.

**Use cases:**
- Comparing **two related metrics** with differing or opposing trends.
- Visualizing **contrasting distributions** or value scales.
- Highlighting **differences and overlaps** across two cumulative areas.

<Aside>
Use **Inverted Area Comparison Charts** when comparing two numerical series with potentially inverse or contrasting patterns, to enhance comparative clarity.
</Aside>

---

## ⚙️ Setup

<Steps>
1. Drag the **Inverted Area Comparison 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 Configuration panel.
4. Under the Configuration panel tab, select the [Basic Configuration](/insights-v8/guide-to-infoboard-designer/customize-panel/configure/#basic) option to access essential settings for the inverted area comparision chart.
5. Select the [Source](/insights-v8/guide-to-infoboard-designer/customize-panel/setup/#sources) from which the chart will fetch its data.
6. Map:
   - **[Measure (Value)](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** — Exactly **two numeric values** representing the Y-axis values.
   - **[Dimension (Axis)](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** — Categorical or sequential value for the primary X-axis labels.
7. Optionally add a **Date** field for time-based filtering.
</Steps>

---

## 📊 Basic Configuration

| Configuration Item   | Description |
|:---------------------|:-------------|
| **[Source](/insights-v8/guide-to-infoboard-designer/customize-panel/setup/#sources)**        | The data source to query for chart values. |
| **[Measure (Value)](/studio-v8/datasources/measures-dimensions-and-hierarchies/)**   | Exactly **two numeric values** to plot on left and right Y-axes. |
| **[Dimension (Axis)](/studio-v8/datasources/measures-dimensions-and-hierarchies/)**  | Categorical or sequential value for primary X-axis labels. |
| **Date Field** (optional) | Enables date-based filtering and drilldown capability. |

<Aside type="note">
Both measures are required — the second Y-axis will be automatically inverted for the second measure.
</Aside>

---

## 🎨 Chart Customizations

| Category                     | Options & Description |
|:----------------------------|:-----------------------------------------------------------|
| **[General](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#general)** | Theme, background, border, and interactivity options. |
| **[Title](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#title)** | Chart title, font, alignment, and visibility settings. |
| **[Sorting](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#sorting)** | Control sorting of categories. |
| **[Grid](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#grid)** | Manage padding and chart grid layout. |
| **[Legend](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#legends)** | Show/hide, position, and format for series legends. |
| **[Categorical Axis](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#categorical-axis)** | Customize category axis labels, rotation, and intervals. |
| **[Numerical Axis](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#numerical-axis)** | Configure Y-axis scale, inversion, and formatting for both measures. |
| **[Series](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#series-customization)** | Control fill color, border color, symbols, smoothing, and data labels for each area line. |
| **[Tooltip](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#tooltip)** | Tooltip content, format, and triggers. |

<Aside>
The **inverted Y-axis** for the second measure is automatically handled via the **Numerical Axis** settings.
</Aside>

---

## 📊 Example Visualization

![Inverted area chart](/images/Insights/Infoboards/Infoboard-Designer/Chart-Library/inverted-area-chart.png)