Skip to main content

Feature usage heatmap

Feature usage heatmap screenshot

Feature usage heatmap uses Fission Charts typed Rust data to render a production-ready heatmap view. Use it to find usage hotspots. The screenshot is captured from the native Fission chart gallery.

What the chart is for​

Feature usage heatmap belongs to the Heatmap family. Its job is to make this data shape readable: Feature/category values on a two-dimensional grid. In a production interface, choose this chart 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​

Feature/category values on a two-dimensional grid. Keep the data close to the Rust type that describes it. Fission Charts is typed Rust, so each chart uses explicit series and component structs instead of string configuration hidden in a loosely typed object.

Rust API​

FieldTypeNotes
title&strNames the chart for the screen, accessibility tree, and test output.
x_axisAxisUsually Axis::category; use Axis::value() when x positions are numeric.
y_axisAxis::value()Maps each sample value to the chart range.
seriesSeriesProvides the typed data model for this chart family.
width / heightf32Optional fixed size; omit them when the chart should flex inside Fission layout.

Example​

use fission_charts::{Axis, Chart, HeatmapSeries, VisualMap};

let chart = Chart::new()
    .title("Load")
    .x_axis(Axis::category(vec!["Mon", "Tue", "Wed"]))
    .y_axis(Axis::category(vec!["AM", "PM"]))
    .visual_map(VisualMap::new().min(0.0).max(10.0))
    .series(vec![HeatmapSeries::new("Load")
        .data(vec![(0, 0, 3.0), (1, 0, 8.0), (2, 1, 5.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 with npm run charts:generate from the website package.

Tags: heatmap, usage.

Heatmap family overview