Hierarchy and flow

The Hierarchy and flow family contains 14 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.
Budget treemap screenshot

Variants

Chart
Data shape
Use when
Nested value nodes.
Use it for budget or storage breakdowns.
Graph nodes plus edges.
Use it for relationship overview surfaces.
Time/value/category tuples.
Use it for campaign or demand mix.
Graph nodes plus edges.
Use it for dependency and topology diagrams.
Vertex list plus edges.
Use it for material, energy, or revenue flow.
Nested nodes with values.
Use it for product and resource hierarchies.
Nested nodes.
Use it for organization and ownership charts.
Nested value nodes.
Use it for hierarchy depth and composition.
Nested nodes.
Use it when hierarchy symmetry matters.
Nested value nodes.
Use it for nested part-to-whole data.
Graph nodes plus edges.
Use it for systems maps and service graphs.
Nested value nodes.
Use it for disk and memory allocation.
Time/value/category tuples.
Use it for composition changing over time.
Vertex list plus edges.
Use it for conversion path analysis.

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 HierarchyAndFlowChart;

impl From<HierarchyAndFlowChart> for Widget {
    fn from(_: HierarchyAndFlowChart) -> Widget {
        Chart::new()
            .title("Hierarchy and flow")
            .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.
Fission
A cross-platform, GPU-accelerated user interface framework for Rust. MIT licensed.
Copyright (c) 2026 Fission
Ready to use today. Widget APIs are expected to remain stable; some runtime and shell APIs may change before 1.0.0.
Fission 0.7.0