Skip to content

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.

โš™๏ธ Setup

  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 tab in the Configuration panel.
  4. Under the Configuration panel tab, select the Basic Configuration option to access essential settings for the Bubble line chart.
  5. Select the Source from which the chart will fetch its data.
  6. Map:
    • Measure (Value) โ€” Numeric value determining the bubbleโ€™s Y-axis (or X if vertical) position.
    • Measure (Size) โ€” (Optional) Numeric value for the marker (bubble) size.
    • Dimension (Axis) โ€” Categorical or sequential value for the primary axis.
    • Group โ€” (Optional) Categorical value to split lines into separate series.
  7. Optionally add a Date field for time-based filtering.

๐Ÿ“Š Basic Configuration

Configuration ItemDescription
SourceThe data source to query for chart values.
Measure (Value)Numeric value determining the bubbleโ€™s Y (or X if vertical) position along the line.
Measure (Size)(Optional) Numeric value controlling the size of each marker.
Dimension (Axis)Categorical or sequential value for the primary axis labels.
Group(Optional) Grouping field to split lines into multiple series.
Date Field (optional)Enables date-based filtering and drilldown capability.

๐ŸŽจ Chart Customizations

CategoryOptions & Description
GeneralTheme, background, border, and interactivity options.
TitleChart title, font, alignment, and visibility settings.
SortingControl sorting of categories along the axis.
GridManage padding and chart grid layout.
LegendShow/hide, position, and format for series legends.
HeatMapApply color gradients based on value ranges.
Categorical AxisCustomize category axis labels, rotation, and intervals.
Numerical AxisAdjust value axis scale, formatting, and log scale.
SeriesConfigure line style, color, bubble shape, and series markers.
TooltipTooltip content, format, and triggers.
OthersSet Orientation (Horizontal / Vertical) and Min/Max Symbol Size for bubbles.

๐Ÿ“Š Example Visualization

Bubble line chart