Components and interaction

Fission

Product

▾

Setup

›

Components and interaction

The Components and interaction family contains 23 renderer-backed chart variants. Use this page as the entry point for choosing the right variant, then open the variant page for the screenshot, data shape, Rust API notes, and example code.

The chart family is still ordinary Fission UI. Each variant is constructed from typed Rust data, participates in layout and theme decisions, and can be driven by app state, reducers, resources, jobs, or services just like any other widget.

Variants

Chart	Data shape	Use when
Axis tooltip	Tooltip::axis_trigger plus series data under shared axes.	Use it when several series share one x position and the user needs exact values.
Brush horizontal	ChartBrush plus ScatterSeries.	Use it for x-range selection.
Brush rectangle	ChartBrush plus ScatterSeries.	Use it for region selection.
Brush selection	ChartBrush configuration plus hit-testable series data.	Use it when users need to select or inspect a region of points.
Data zoom	DataZoom start and end percentages plus ordered series data.	Use it when the user needs to inspect a slice of a longer series without leaving context.
Data zoom long	DataZoom plus LineSeries.	Use it for dashboards with focus ranges.
Data zoom short	DataZoom plus LineSeries.	Use it for local inspection of long series.
Graphic band	ChartGraphic plus LineSeries.	Use it for release windows and custom callouts.
Graphic callout	ChartGraphic plus LineSeries.	Use it to explain a change in context.
Graphic overlay	ChartGraphic rect, text, line, or circle records.	Use it for callouts, annotations, labels, and lightweight explanatory overlays.
Mark area component	MarkArea plus LineSeries.	Use it for safe operating zones.
Mark line and point	MarkArea, MarkLine, and MarkPoint records attached to a chart.	Use it to explain thresholds, goals, anomalies, or operational bands directly on the chart.
Mark line component	MarkLine plus LineSeries.	Use it for goals and alert thresholds.
Mark point component	MarkPoint plus LineSeries.	Use it for incidents and milestones.
Timeline	ChartTimeline labels and current index.	Use it to show snapshots, scenario years, deployment phases, or step-based playback.
Timeline releases	ChartTimeline plus series.	Use it for phase or scenario playback.
Timeline years	ChartTimeline plus series.	Use it for step-based snapshots.
Toolbox actions	ChartInteraction toolbox action list.	Use it when a chart has explicit utility operations that should remain close to the data.
Toolbox full	ChartInteraction toolbox actions.	Use it when a chart supports several operations.
Toolbox zoom	ChartInteraction toolbox actions.	Use it for chart utility operations.
Tooltip axis component	Tooltip plus ChartInteraction.	Use it for exact values across series.
Tooltip item component	Tooltip item trigger.	Use it for exact item readout.
Visual map component	VisualMap plus HeatmapSeries.	Use it where color represents a numeric value.

Choosing within this family

Start with the user's question, not the visual effect. Pick the simplest variant that makes the answer clear, add interaction only when it reduces work for the user, and keep animation purposeful enough that it explains a change rather than decorating the page.

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, Chart, LineSeries};

pub struct ComponentsAndInteractionChart;

impl From<ComponentsAndInteractionChart> for Widget {
    fn from(_: ComponentsAndInteractionChart) -> Widget {
        Chart::new()
            .title("Components and interaction")
            .x_axis(Axis::category(vec!["A", "B", "C"]))
            .y_axis(Axis::value())
            .series(vec![LineSeries::new("Series").data(vec![1.0, 2.0, 3.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.

Variants

Choosing within this family

Authoring from a Fission component

Options, accessibility, and diagnostics

Fission

A cross-platform, GPU-accelerated user interface framework for Rust. MIT licensed.

Ready to use today. Widget APIs are expected to remain stable; some runtime and shell APIs may change before 1.0.0.

GitHub

Quickstart

Reference

Fission 0.7.0