3D graph | Fission

Fission

Product

▾

Setup

›

›

Relationship nodes placed in a native 3D scene. Use it when topology benefits from depth or when the graph is part of a 3D product surface. The screenshot is captured from the native Fission chart gallery.

What the chart is for

3D graph is part of the 3D and GL chart family and is intended for Vertex positions and values lowered into Scene3D primitives. Use it when spatial data is genuinely easier to understand in a 3D viewport.

Avoid it when a two-dimensional chart answers the question more directly; 3D should clarify spatial data, not decorate ordinary comparisons.

Data model

Vertex positions and values lowered into Scene3D primitives. The example is built from Scene3D and Primitive3D, which means it stays in the normal Fission widget tree and is rendered by the shell rather than a browser canvas island.

Rust API

Field	Type	Notes
scene	Scene3D	Owns the retained native 3D chart viewport.
primitive	Primitive3D	Uses spheres, cuboids, or meshes for chart geometry.
width / height	f32	Optional fixed size; omit them when the chart should flex inside Fission layout.

Example

use fission::three_d::{Point3D, Primitive3D, Scene3D};
use fission::core::op::Color;

let scene = Scene3D::new()
    .add_primitive(Primitive3D::Sphere {
        center: Point3D::new(0.0, 0.0, 0.0),
        radius: 0.4,
        color: Color { r: 20, g: 184, b: 166, a: 255 },
    });

Interaction and animation

3D chart examples use the same Fission widget lifecycle as other charts. As the 3D chart model grows, interaction should continue to use typed events and reducers rather than ad-hoc callback registries.

Testing guidance

For this chart, test the generated geometry 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, Chart, LineSeries};

pub struct Fission3DGraphChart;

impl From<Fission3DGraphChart> for Widget {
    fn from(_: Fission3DGraphChart) -> Widget {
        Chart::new()
            .title("3D graph")
            .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.