Bubble scatter | Fission

Fission

Product

▾

Setup

›

Statistical and finance

›

Bubble scatter

Scatter points where bubble size carries a third numeric dimension. Use it when two axes are not enough and size can encode importance or volume. The screenshot is captured from the native Fission chart gallery.

What the chart is for

Bubble scatter is part of the Statistical and finance chart family and is intended for Vec<(x, y, size)>. Use it when the visual form makes the user's question faster to answer than a table or a simpler chart would.

Avoid it when the visual form makes the user estimate more than necessary; choose the simplest chart that answers the product question.

Data model

Vec<(x, y, size)>. Keep the data close to the type that describes it. Fission Charts is typed Rust, so a line uses LineSeries, a calendar heatmap uses CalendarHeatmapSeries, and chart components such as zoom, marks, and graphics are explicit fields on Chart rather than hidden string configuration.

Rust API

Field	Type	Notes
title	&str	Names the chart for the screen, accessibility tree, and test output.
x_axis	Axis::value()	Maps the first point dimension.
y_axis	Axis::value()	Maps the second point dimension.
series	ScatterSeries / BubbleSeries / EffectScatterSeries	Chooses fixed points, sized bubbles, or emphasized points.
width / height	f32	Optional fixed size; omit them when the chart should flex inside Fission layout.

Example

use fission::charts::{Axis, BubbleSeries, Chart, VisualMap};

let chart = Chart::new()
    .title("Bubble scatter")
    .x_axis(Axis::value())
    .y_axis(Axis::value())
    .visual_map(VisualMap::new().min(10.0).max(80.0))
    .series(vec![BubbleSeries::new("Markets")
        .data(vec![(10.0, 8.0, 22.0), (18.0, 12.0, 46.0), (32.0, 22.0, 74.0)])
        .radius_range(6.0, 24.0)
        .into()]);

Interaction and animation

Charts can emit typed ChartInteractionEvent values when interaction is enabled. Handle those events in a reducer when the app needs hover, press, release, scroll, selection, or brush behavior. ChartAnimation stores duration, delay, stagger, easing, and reduced-motion behavior as deterministic chart data, so animation timing can be tested instead of being hidden in ad-hoc timers.

Testing guidance

For this chart, test the data mapping first, then test lowering, then capture a live screenshot when visual output changes. The screenshot for this page is refreshed by running the ignored chart-gallery screenshot capture test with FISSION_UPDATE_CHART_DOCS=1, which updates documentation/static/img/charts before the static site build.

Authoring from a Fission component

Use this reference page as the chart expression inside ordinary Fission component conversion. The chart is a Widget, so it can sit inside a Card, Grid, Scroll, responsive page section, or any other layout container.

use fission::prelude::*;
use fission::charts::{Axis, BubbleSeries, Chart, VisualMap};

pub struct BubbleScatterChart;

impl From<BubbleScatterChart> for Widget {
    fn from(_: BubbleScatterChart) -> Widget {
        Chart::new()
            .title("Bubble scatter")
            .x_axis(Axis::value())
            .y_axis(Axis::value())
            .visual_map(VisualMap::new().min(10.0).max(80.0))
            .series(vec![BubbleSeries::new("Markets")
                .data(vec![(10.0, 8.0, 22.0), (18.0, 12.0, 46.0), (32.0, 22.0, 74.0)])
                .radius_range(6.0, 24.0)
                .into()])
            .into()
    }
}

Keep expensive data loading outside component conversion. A reducer, job, service, or server route should prepare the typed chart data, then the component should read that state and construct the chart deterministically.

Options, accessibility, and diagnostics

Area	What to decide	How to verify
Data shape	Keep source rows in typed Rust structs, then map them into the series type shown in the example.	Unit test the mapping separately from rendering.
Options	Choose axes, legends, labels, animation, and interaction based on the user's task.	Add a screenshot test when changing visual behavior.
Accessibility	Provide a clear title and adjacent summary text for important trends or outliers.	Inspect the generated semantics and make sure the chart is understandable without color alone.
Failure handling	Render an empty, loading, or error state before constructing the chart if data is unavailable.	Test empty data, partial data, and failed fetches.
Performance	Prefer summarized or windowed data for very large datasets; keep full raw history in the data layer.	Profile frame time and interaction latency with representative data volumes.