Create Bubble chart

Everything you need to know to create the chart you want.

Overview

Bubble charts extend scatter plots by adding a third dimension: marker size. Each bubble encodes X, Y, and size.

When to use it

  • Showing relationships between three metrics simultaneously (e.g., revenue vs. growth vs. market share).

  • Highlighting standout segments in market analysis.

  • Communicating scale alongside positioning.

Avoid bubble charts if the size differences are subtle or if you need precise comparisonsβ€”bar charts might tell the story more clearly.

Data requirements

  • X-value, Y-value, and bubble size for each point.

  • Ensure bubble sizes are positive numbers.

Style options available

Group
Control
Input type
Options
Description

Colors

Color palette

palette

β€”

Palette applied to series; sets the default colours for the chart.

General β†’ Data labels

Show data labels

boolean

β€”

Shows numeric labels directly on data points.

General β†’ Data labels

Allow labels to overlap

boolean

β€”

Allows labels to render even if they collide instead of hiding them automatically.

General β†’ Data labels

Font name

text

β€”

Font family used for titles, labels, or legend text.

General β†’ Data labels

Font style

text

β€”

Font weight or style (e.g., bold, italic).

General β†’ Data labels

Font size

number

β€”

Font size in pixels for the selected text element.

General β†’ Data labels

Font color

color

β€”

Colour of the text shown for this element.

Axes β†’ X Axis

Show X Axis

boolean

β€”

Shows or hides the X axis line, ticks, and labels.

Axes β†’ X Axis

Base line width

number

β€”

Thickness of the axis baseline line in pixels.

Axes β†’ X Axis

Grid line width

number

β€”

Thickness of gridlines in pixels.

Axes β†’ X Axis

Base line color

color

β€”

Colour of the axis baseline line.

Axes β†’ X Axis

Grid line color

color

β€”

Colour for gridlines drawn across the chart background.

Axes β†’ X Axis

Grid line style

select

Solid, ShortDash, ShortDot, ShortDashDot, ShortDashDotDot, Dot, Dash, LongDash, DashDot, LongDashDot, LongDashDotDot

Line pattern used for gridlines (solid, dashed, dotted, etc.).

Axes β†’ X Axis

Tick width

number

β€”

Thickness of tick marks in pixels.

Axes β†’ X Axis

Tick length

number

β€”

Length of the tick marks in pixels.

Axes β†’ X Axis

Tick color

color

β€”

Colour of the axis tick marks.

Axes β†’ X Axis

Type

select

linear, logarithmic

Sets the horizontal axis scale (category, numeric, logarithmic, or datetime).

Axes β†’ X Axis

Opposite side

boolean

β€”

Positions the axis on the opposite side of the chart (top/right).

Axes β†’ X Axis

Margin for title

number

β€”

Space between the axis title and the axis labels/ticks.

Axes β†’ Y Axis

Show Y Axis

boolean

β€”

Shows or hides the Y axis line, ticks, and labels.

Axes β†’ Y Axis

Base line width

number

β€”

Thickness of the axis baseline line in pixels.

Axes β†’ Y Axis

Grid line width

number

β€”

Thickness of gridlines in pixels.

Axes β†’ Y Axis

Base line color

color

β€”

Colour of the axis baseline line.

Axes β†’ Y Axis

Grid line color

color

β€”

Colour for gridlines drawn across the chart background.

Axes β†’ Y Axis

Grid line style

select

Solid, ShortDash, ShortDot, ShortDashDot, ShortDashDotDot, Dot, Dash, LongDash, DashDot, LongDashDot, LongDashDotDot

Line pattern used for gridlines (solid, dashed, dotted, etc.).

Axes β†’ Y Axis

Tick width

number

β€”

Thickness of tick marks in pixels.

Axes β†’ Y Axis

Tick length

number

β€”

Length of the tick marks in pixels.

Axes β†’ Y Axis

Tick color

color

β€”

Colour of the axis tick marks.

Axes β†’ Y Axis

Labels alignment

select

left, center, right

Horizontal alignment of axis labels relative to the tick mark.

Axes β†’ Y Axis

X offset

number

β€”

Horizontal offset applied to axis labels.

Axes β†’ Y Axis

Y offset

number

β€”

Vertical offset applied to axis labels.

Axes β†’ Y Axis

Type

select

linear, logarithmic

Sets the vertical axis scale (category, numeric, logarithmic, or datetime).

Axes β†’ Y Axis

Opposite side

boolean

β€”

Positions the axis on the opposite side of the chart (top/right).

Axes β†’ Y Axis

Margin for title

number

β€”

Space between the axis title and the axis labels/ticks.

Axes β†’ Common

Font name

text

β€”

Font family used for titles, labels, or legend text.

Axes β†’ Common

Font style

text

β€”

Font weight or style (e.g., bold, italic).

Axes β†’ Common

Font size

number

β€”

Font size in pixels for the selected text element.

Axes β†’ Common

Font color

color

β€”

Colour of the text shown for this element.

Axes β†’ Axes titles

Font name

text

β€”

Font family used for titles, labels, or legend text.

Axes β†’ Axes titles

Font style

text

β€”

Font weight or style (e.g., bold, italic).

Axes β†’ Axes titles

Font size

number

β€”

Font size in pixels for the selected text element.

Axes β†’ Axes titles

Font color

color

β€”

Colour of the text shown for this element.

Axes β†’ Axes titles

X Axis margin

number

β€”

Extra padding around the X axis labels for titles.

Axes β†’ Axes titles

Y Axis margin

number

β€”

Extra padding around the Y axis labels for titles.

Legend β†’ Main

Show legend

boolean

β€”

Shows or hides the legend box.

Legend β†’ Main

Horizontal align

select

left, center, right

Horizontal alignment for the legend box (left, centre, right).

Legend β†’ Main

Vertical align

select

top, middle, bottom

Vertical alignment for the legend box (top, middle, bottom).

Legend β†’ Main

Layout

select

horizontal, vertical, proximate

Orientation of the legend items (horizontal row, vertical column, or proximate).

Legend β†’ Additional

Margin for legend

number

β€”

Outer margin around the legend box.

Legend β†’ Additional

Margin top for items

number

β€”

Top padding inside the legend between items.

Legend β†’ Additional

Margin bottom for items

number

β€”

Bottom padding inside the legend between items.

Legend β†’ Additional

Distance between items

number

β€”

Horizontal spacing between legend entries.

Legend β†’ Style

Font name

text

β€”

Font family used for titles, labels, or legend text.

Legend β†’ Style

Font style

text

β€”

Font weight or style (e.g., bold, italic).

Legend β†’ Style

Font size

number

β€”

Font size in pixels for the selected text element.

Legend β†’ Style

Font color

color

β€”

Colour of the text shown for this element.

Title β†’ Chart title

Font name

text

β€”

Font family used for titles, labels, or legend text.

Title β†’ Chart title

Font style

text

β€”

Font weight or style (e.g., bold, italic).

Title β†’ Chart title

Font size

number

β€”

Font size in pixels for the selected text element.

Title β†’ Chart title

Font color

color

β€”

Colour of the text shown for this element.

Title β†’ Chart title

Margin bottom

number

β€”

Extra space below chart titles or subtitles in pixels.

Title β†’ Chart subtitle

Font name

text

β€”

Font family used for titles, labels, or legend text.

Title β†’ Chart subtitle

Font style

text

β€”

Font weight or style (e.g., bold, italic).

Title β†’ Chart subtitle

Font size

number

β€”

Font size in pixels for the selected text element.

Title β†’ Chart subtitle

Font color

color

β€”

Colour of the text shown for this element.

🫧 Tip: Sort data by size before importing if you want larger bubbles to render first or lastβ€”this affects overlapping order.

Have problems or want to improve this chart type?

Ping us via [email protected].

Last updated

Was this helpful?