---
title: "Bubble Line"
description: "A line chart with variable-sized markers (bubbles) to represent an additional quantitative measure at each point."
group: Charts
tags: [Visualization, Chart, Dashboard, Line, Bubble, Comparative Analysis]
---

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

# Bubble Line

The **Bubble Line Chart** is a hybrid visualization combining a line chart with **variable-sized markers (bubbles)** plotted along the line.  
Each bubble’s **position** is determined by a dimension and a measure, while the **bubble size** represents a second measure, enabling multivariate analysis within a trend-based layout.

**Use cases:**
- Visualizing **value trends over a sequence or category**, while encoding an additional quantitative value via bubble size.
- Showing **distribution patterns, outliers, and magnitudes** within line charts.
- Comparing series values and bubble magnitudes simultaneously.

<Aside>
Use **Bubble Line Charts** when trend lines are necessary and it’s valuable to visualize an extra numeric measure via marker size.
</Aside>

---

## ⚙️ Setup

<Steps>
1. Drag the **Bubble Line 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 Bubble line 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/)** — Numeric value determining the bubble’s Y-axis (or X if vertical) position.
   - **[Measure (Size)](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** — (Optional) Numeric value for the marker (bubble) size.
   - **[Dimension (Axis)](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** — Categorical or sequential value for the primary axis.
   - **[Group](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** — (Optional) Categorical value to split lines into separate series.
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/)**   | Numeric value determining the bubble’s Y (or X if vertical) position along the line. |
| **[Measure (Size)](/studio-v8/datasources/measures-dimensions-and-hierarchies/)**   | (Optional) Numeric value controlling the size of each marker. |
| **[Dimension (Axis)](/studio-v8/datasources/measures-dimensions-and-hierarchies/)**  | Categorical or sequential value for the primary axis labels. |
| **[Group](/studio-v8/datasources/measures-dimensions-and-hierarchies/)**             | (Optional) Grouping field to split lines into multiple series. |
| **Date Field** (optional) | Enables date-based filtering and drilldown capability. |

<Aside type="note">
If **Size** is not configured, the bubbles will default to the **Value** measure for size scaling.
</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 along the axis. |
| **[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. |
| **[HeatMap](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#heatmap)** | Apply color gradients based on value ranges. |
| **[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)** | Adjust value axis scale, formatting, and log scale. |
| **[Series](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#series-customization)** | Configure line style, color, bubble shape, and series markers. |
| **[Tooltip](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#tooltip)** | Tooltip content, format, and triggers. |
| **Others** | Set **Orientation** (`Horizontal` / `Vertical`) and **Min/Max Symbol Size** for bubbles. |

<Aside>
Use **Group** to split data into multiple colored lines with custom markers.  
Adjust **Min Symbol Size** and **Max Symbol Size** to scale bubble sizes effectively.
</Aside>

---

## 📊 Example Visualization

![Bubble line chart](/images/Insights/Infoboards/Infoboard-Designer/Chart-Library/bubble-line-chart.png)