Stacked area

Documentation

From the canonical component guide.

Line, area and bar charts draw on a canvas, with the value axis, category labels, legend and tooltip as ordinary elements. Moving the pointer across a chart marks the category under it (a line through its points, a band behind its bars) and shows each series' value there.

use blinc::cn::prelude::*;

cn::line_chart()
    .series("CPU", &[30.0, 45.0, 40.0, 60.0, 55.0])
    .series("Memory", &[20.0, 25.0, 30.0, 35.0, 40.0])
    .labels(vec!["Mon".into(), "Tue".into(), "Wed".into(), "Thu".into(), "Fri".into()])
    .format(|v| format!("{v}%"))
    .dots()

cn::area_chart() fills down to the axis; .stacked() piles the series, each filling down to the one below. cn::bar_chart() sets the series side by side in each category, or piles them when .stacked(); .horizontal() lays the bars along the width with the categories down the side. Bars are rounded at the end away from the axis.

cn::bar_chart()
    .series("Desktop", &[186.0, 305.0, 237.0])
    .series("Mobile", &[80.0, 200.0, 120.0])
    .labels(vec!["Jan".into(), "Feb".into(), "Mar".into()])

.curve(ChartCurve::Linear) or Step replace the smooth curve, .height(..) and .width(..) size it (it fills its parent's width unless set), .min(..) and .max(..) fix the value axis, and .no_grid(), .no_axes(), .no_tooltip() and .legend(false) leave parts out.

Pie and donut

cn::pie_chart() sizes slices by their share of the total, clockwise from the top; they sweep in, and ease to new values. .donut(0.6) cuts a hole of that share of the radius, and .total("Visitors") writes the total in it with the caption under. Hovering pulls a slice out and shows its value and share.

cn::pie_chart()
    .slice("Chrome", 275.0)
    .slice("Safari", 200.0)
    .slice("Other", 90.0)
    .donut(0.6)
    .total("Visitors")

.data(..) takes a list, Signal or Computed of PieSlice; .size(..) sets the diameter (220 unless set). The total is .cn-chart-pie-total and its caption .cn-chart-pie-caption.

Live data

.data(..) takes all the series as a list, Signal or Computed of ChartSeries, and .labels(..) likewise. The chart follows them in place, easing from the values it shows to the new ones:

let visitors = ctx.use_signal(vec![
    ChartSeries::new("Desktop", vec![186.0, 305.0, 237.0]),
    ChartSeries::new("Mobile", vec![80.0, 200.0, 120.0]),
]);

cn::area_chart().data(visitors).stacked()

Styling

Series take --chart-1 to --chart-5 in turn, from the theme (one palette per scheme); ChartSeries::color(..) takes any CSS colour for one. The grid, the pointer's cursor and the rings round dots are --cn-chart-grid, --cn-chart-cursor and --cn-chart-surface. Setting those variables restyles every chart:

:root { --chart-1: #16a34a; --cn-chart-grid: transparent; }

The parts are .cn-chart, .cn-chart-plot, .cn-chart-axis (a crowded label carries data-hidden), .cn-chart-legend with .cn-chart-legend-item and .cn-chart-swatch, and .cn-chart-tooltip with its -title, -row, -name and -value.

Sparklines, thresholds, histograms and comparisons

These are drawn on the same plot:

let frame_times = vec![12.0, 18.0, 15.0, 22.0];
let diffs = vec![1.0, 2.0, 2.5, 3.0, 5.0];

// A trend beside text: no axes, grid, legend or tooltip, 100 by 24.
cn::spark_line(vec![1.0, 2.5, 2.0, 3.5, 3.0]).color("var(--success)").filled();

// Values against budgets: each dot takes its band's colour.
cn::threshold_line_chart()
    .values(frame_times)
    .band(ChartBand::new(0.0, 16.67).label("60 fps"))
    .band(ChartBand::new(16.67, 33.33).label("30 fps"))
    .baseline(16.67);

// Values counted into equal-width bins.
cn::histogram(diffs).bins(30).log_scale().marker(5.0);

// Baseline against current per category, the change written beside it.
cn::comparison_bar_chart()
    .item("Render", 12.5, 14.2)
    .item("Layout", 3.2, 3.0)
    .threshold(10.0)

Any chart takes .band(..) for a shaded value range (good, warning and bad in turn unless given a colour) and .marker(ChartMarker::new(v)) for a dashed line at a value. A band's label is .cn-chart-band-label; a comparison's notes are .cn-chart-note with data-tone="bad" past the threshold or "good" for a decrease.