---
title: "Bi-Variate Scatter"
description: "Multi-grid scatter charts with dynamically sized markers, configurable axis scales, heatmaps, tooltips, and multiple group series."
group: Charts
tags: [Visualization, Scatter Plot, Multi-Panel, Trend Analysis]
---
import { Aside, Steps } from '@astrojs/starlight/components';
# Bi-Variate Scatter
A **BiVariate Scatter Chart** visualizes two quantitative measures against each other in a multi-grid layout, optionally encoding a third quantitative variable as marker size.
You can split the chart into multiple grids based on a **Split** dimension, and optionally group data points into series using a **Group** dimension.
**Key Features:**
- **Multi-grid layout** via Split dimension.
- **Group series** within each grid.
- Optional **dynamic symbol size** based on Size measure, X or Y axis values.
- Configurable **box shadow** effects on points.
- Supports **log or linear scales** for both axes.
- DataZoom (slider + inside) for axis zooming.
- Heatmap coloring via a VisualMap.
- Rich tooltips and legend customization.
- Responsive and accessible via ARIA.
**Use Cases:**
- Visualizing **correlation between two measures** across multiple categories.
- Bubble scatter trends by time periods, regions, or product types.
- Comparing sales vs. profitability with volume as bubble size.
- Outlier detection and multi-category analysis.
---
## ⚙️ Setup
1. Add a **BiVariate Scatter 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 bi variate scatter 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:
- **[XAxis (Measure)](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** — X-axis value.
- **[YAxis (Measure)](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** — Y-axis value.
- **[Size (Measure)](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** — (Optional) for bubble size.
- **[Split (Dimension)](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** — Creates separate grids.
- **[Group (Dimension)](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** — Series grouping within grids.
- **[Dimension (optional)](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** — Additional label or data field.
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. |
| **[XAxis](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** | Numeric measure for X-axis. |
| **[YAxis](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** | Numeric measure for Y-axis. |
| **[Size](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** (optional)| Numeric measure controlling bubble size. |
| **[Split](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** | Splits chart into separate panels/grids. |
| **[Group](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** | Series grouping within each grid. |
| **[Dimension](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** (optional)| Label or category field attached to points. |
---
## 🎨 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. |
| **[XAxis/YAxis](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#numerical-axis)** | Numeric axis scales (linear/log), min/max, formatting. |
| **[Series](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#series-customization)** | Marker shape, color, shadow effects. |
| **[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)** | Bubble Min/Max sizes, size source (Size/XAxis/YAxis), and Box Shadow settings. |
---
## 📊 Example Visualization
