Native, interactive charts for Slint.

Try the gallery in your browser Request a commercial license

SlintPlot: native charts for Slint in Rust

SlintPlot draws charts with Slint's own Path, Rectangle and Text elements. They are not images: charts stay sharp at any scale, follow the theme and dark mode, and react to the mouse. Datasets are ordinary Slint models, so updating a row updates the chart.

Getting started

1. Add the dependencies

SlintPlot is used both as a regular dependency (the register! macro) and as a build dependency (to find its .slint files).

[dependencies]
slint = "1.18"
slintplot = "0.5"

[build-dependencies]
slint-build = "1.18"
slintplot = "0.5"

2. Make the library importable: build.rs

fn main() {
    let config = slint_build::CompilerConfiguration::new().with_library_paths(
        std::collections::HashMap::from([("slintplot".into(), slintplot::library_path())]),
    );
    slint_build::compile_with_config("ui/app.slint", config).unwrap();
}

3. Use a chart: ui/app.slint

import { ChartEngine, LineChart } from "@slintplot";
export { ChartEngine } // required, so Rust can connect it

export component App inherits Window {
    preferred-width: 800px;
    preferred-height: 500px;

    // Only the data and the properties that differ from their default.
    // The LineChart section lists every property.
    LineChart {
        title: "Revenue";
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
        datasets: [
            { label: "2025", values: [12, 19, 8, 15, 22, 18], fill: true, tension: 0.4 },
            { label: "2026", values: [15, 22, 13, 24, 26, 30], tension: 0.4 },
        ];
    }
}

Import only the charts you use, plus ChartEngine, which must always be imported and exported. Charts you don't import cost nothing: Slint generates code only for the components your UI uses. register! connects the whole engine either way.

4. Connect the engine: src/main.rs

slint::include_modules!();

fn main() -> Result<(), slint::PlatformError> {
    let app = App::new()?;
    slintplot::register!(app);
    app.run()
}

How it works

Charts are Slint components. Geometry such as line paths, bar positions and axis ticks is computed in Rust by the ChartEngine global's pure callbacks, which slintplot::register! connects. Because the callbacks are pure, Slint recomputes them automatically when the chart's size, data or theme changes.

• Data is a Slint model. Set it in .slint or from Rust; changing a row updates the chart.
• Colors are optional. Datasets and slices without a color take the next color of the active theme.
• Two requirements: export ChartEngine from your root .slint file, and call slintplot::register! once after creating the component.

LineChart

Lines through the values of each dataset, one point per label.

import { LineChart } from "@slintplot";

LineChart {
    title: "Average temperature";
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    datasets: [
        { label: "Oslo", values: [-4.3, -4.0, -0.2, 4.5, 10.8, 15.2, 16.4, 15.2, 10.8, 6.3, 0.7, -3.1], tension: 0.4 },
        { label: "Bergen", values: [1.5, 1.3, 3.1, 5.9, 10.3, 13.2, 14.5, 14.5, 11.8, 8.6, 4.6, 2.3], tension: 0.4, fill: true },
    ];
    value-suffix: " °C";
}

Dataset options that apply to lines: tension (0 for straight segments, about 0.4 for smooth curves), fill (fill to the axis, or to the dataset below when stacked) and stepped (steps instead of slopes). All properties are listed under Cartesian properties.

Stepped and stacked lines

import { LineChart } from "@slintplot";

LineChart {
    title: "Electricity supply (GWh)";
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    datasets: [
        { label: "Solar", values: [2, 5, 10, 15, 20, 22, 23, 19, 13, 7, 3, 1], fill: true },
        { label: "Wind", values: [26, 23, 21, 16, 12, 10, 9, 11, 15, 20, 24, 27], fill: true },
        { label: "Imports", values: [12, 12, 8, 8, 8, 5, 5, 5, 9, 9, 9, 14], stepped: true },
    ];
    stacked: true;
}

BarChart

Vertical bars, grouped by default and stacked with stacked: true. The value axis begins at zero.

import { BarChart } from "@slintplot";

BarChart {
    title: "Visitors";
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
    datasets: [
        { label: "Desktop", values: [1200, 1350, 1100, 1480, 1620, 1390] },
        { label: "Mobile", values: [2400, 2650, 2900, 3100, 3350, 3600] },
    ];
    bar-radius: 6px;
    bar-border-width: 2px;
}

When stacked, positive and negative values stack separately.

HorizontalBarChart

Categories run down the left side and bars grow to the right.

import { ChartLegendPosition, HorizontalBarChart } from "@slintplot";

HorizontalBarChart {
    title: "Languages used (%)";
    labels: ["JavaScript", "Python", "TypeScript", "Java", "C++", "Rust"];
    datasets: [
        { label: "2025", values: [62, 51, 38, 30, 23, 12] },
        { label: "2026", values: [60, 55, 43, 29, 23, 15] },
    ];
    legend-position: ChartLegendPosition.right;
}

ScatterChart

Points on numeric x and y axes. Datasets use points instead of values. Hovering highlights the nearest point and shows its coordinates.

import { ScatterChart } from "@slintplot";

ScatterChart {
    title: "Height and weight";
    datasets: [
        {
            label: "Group A",
            points: [{ x: 158, y: 52 }, { x: 162, y: 57 }, { x: 165, y: 58 }, { x: 168, y: 64 }, { x: 170, y: 61 }, { x: 172, y: 70 },
                     { x: 175, y: 72 }, { x: 177, y: 69 }, { x: 180, y: 82 }, { x: 184, y: 79 }, { x: 187, y: 86 }, { x: 191, y: 90 }],
        },
        {
            label: "Group B",
            points: [{ x: 152, y: 47 }, { x: 155, y: 51 }, { x: 157, y: 49 }, { x: 160, y: 55 }, { x: 161, y: 52 }, { x: 163, y: 58 },
                     { x: 165, y: 54 }, { x: 166, y: 61 }, { x: 168, y: 59 }, { x: 170, y: 63 }, { x: 173, y: 66 }, { x: 176, y: 64 }],
        },
    ];
    x-title: "Height (cm)";
    y-title: "Weight (kg)";
    zoom-enabled: true;
}

BubbleChart

A scatter chart whose points have a radius: r is the bubble radius in pixels. Hovering works anywhere inside a bubble.

import { BubbleChart } from "@slintplot";

BubbleChart {
    title: "Markets";
    datasets: [
        {  // r: the bubble radius in pixels
            label: "Retail",
            points: [{ x: 20, y: 30, r: 15 }, { x: 35, y: 18, r: 8 }, { x: 48, y: 40, r: 24 }, { x: 60, y: 25, r: 12 },
                     { x: 72, y: 46, r: 18 }, { x: 85, y: 34, r: 10 }, { x: 28, y: 44, r: 11 }, { x: 92, y: 20, r: 6 }],
        },
        {
            label: "Online",
            points: [{ x: 15, y: 12, r: 9 }, { x: 30, y: 36, r: 20 }, { x: 42, y: 22, r: 7 }, { x: 55, y: 48, r: 14 },
                     { x: 66, y: 14, r: 22 }, { x: 78, y: 28, r: 9 }, { x: 88, y: 44, r: 16 }, { x: 52, y: 8, r: 6 }],
        },
    ];
}

PieChart

Slices proportional to their values. The hovered slice moves outwards, and the tooltip shows its value and share. Clicking a legend entry hides the slice.

import { PieChart } from "@slintplot";

PieChart {
    title: "Browsers";
    slices: [
        { label: "Chrome", value: 64 },
        { label: "Safari", value: 19 },
        { label: "Edge", value: 5 },
        { label: "Firefox", value: 3 },
        { label: "Samsung Internet", value: 3 },
        { label: "Other", value: 6, color: transparent, hidden: false },
    ];
    show-percentages: true;
}

DoughnutChart

A PieChart with cutout: 0.5. It has the same properties.

import { DoughnutChart } from "@slintplot";

DoughnutChart {
    title: "Traffic sources";
    slices: [
        { label: "Search", value: 48 },
        { label: "Direct", value: 22 },
        { label: "Social", value: 17 },
        { label: "Email", value: 8 },
        { label: "Referral", value: 5 },
    ];
}

PolarAreaChart

Slices of equal angle whose radius shows the value, with labelled value rings. It has the same properties as PieChart.

import { PolarAreaChart } from "@slintplot";

PolarAreaChart {
    title: "Sales by region";
    slices: [
        { label: "North", value: 11 },
        { label: "East", value: 16 },
        { label: "South", value: 7 },
        { label: "West", value: 9 },
        { label: "Central", value: 13 },
    ];
}

RadarChart

One spoke per label and one closed polygon per dataset. Hovering a spoke shows every dataset's value for it.

import { RadarChart } from "@slintplot";

RadarChart {
    title: "Skills";
    labels: ["Speed", "Power", "Range", "Comfort", "Safety", "Price"];
    datasets: [
        { label: "Model A", values: [80, 65, 70, 50, 75, 60], fill: true },
        { label: "Model B", values: [55, 80, 60, 75, 85, 70], fill: true },
    ];
}

RadialBarChart

One ring per bar, the first outermost, each filled along its arc in proportion to its value over a faint gray track, like activity rings and radial progress bars. A full ring is max-value, or the largest value when it is 0; larger values fill the ring. The rings cover sweep degrees (270 by default) clockwise from start-angle, and each label goes in the opening before the start of its ring. Each value is written just past the end of its bar, or inside the bar when it is nearly full. The bars take the theme's colors in turn, or one color for all; a bar's own color overrides both. They grow in when the chart appears and move to new values when a bar's value changes; change the bars' rows in place (set_row_data) rather than replacing the model, so that each bar keeps its ring. Hovering a ring or its label shows its value. The bars are ChartSlices, as in a pie chart, so the same data can be shown both ways.

import { RadialBarChart } from "@slintplot";

RadialBarChart {
    title: "Fitness goals this week";
    bars: [
        { label: "Steps", value: 86 },
        { label: "Active minutes", value: 64 },
        { label: "Workouts", value: 100 },
        { label: "Sleep", value: 92 },
        { label: "Water", value: 45 },
        { label: "Stretching", value: 30 },
        { label: "Reading", value: 18 },
    ];
    max-value: 100;
    value-suffix: "%";
}

SegmentedRingChart

A heatmap bent into concentric rings. values is a matrix, [[float]]: each row is a ring, the first outermost, and each column a segment of every ring, going round from start-angle, clockwise or not. The chart takes its size from the matrix, as many rings as rows and as many segments as the longest row, and fits them to the space it has; shorter rows leave the rest of their ring empty. Cells are colored on a scale, with the same properties as a HeatmapChart, or by category: with classes set, each value is the index of its category, and the categories make the legend. Missing values (NaN), and values that name no category such as -1, are left as a faint track. x-labels go round the outside, every second or third one where they don't all fit, and y-labels name the rings in the tooltip. center-text and center-label are written in the middle; hovering a cell shows it there instead.

import { SegmentedRingChart } from "@slintplot";

SegmentedRingChart {
    title: "Automated runs this week";
    // One ring per day, the first outermost; one segment per run, every 90 minutes.
    // 0: on its own, 1: needed you, 2: failed, -1: not run yet.
    values: [
        [0, 0, 0, 1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 0],
        [0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
        [0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 2, 0],
        [0, 0, 0, 0, 1, 0, 0, 0, 0, -1, -1, -1, -1, -1, -1, -1],
    ];
    y-labels: ["Mon", "Tue", "Wed", "Thu", "Fri"];
    classes: [
        { label: "On its own", color: #9bc53d },
        { label: "Needed you", color: #f0904a },
        { label: "Failed", color: #e0636b },
    ];
    show-labels: false;
    show-marker: true;
    center-text: "73";
    center-label: "RUNS";
}

How the matrix becomes rings

• Rows are rings. values[0] is the outer ring, values[1] the next one in, and so on. A matrix with one row is a single ring.
• Columns are segments. Column 0 starts at start-angle (12 o'clock by default), and the columns go round clockwise, or counterclockwise with clockwise: false. Every ring has as many segments as the longest row has values, so the same column lines up on every ring, like a clock face: hours, days of a month, steps of a process.
• The size is automatic. There is nothing to set when the matrix grows or shrinks: the ring width, the segment angle and the spacing of the labels follow the data and the size of the chart. Few rings stay narrow at the outside rather than filling the whole radius.
• Rows can differ in length. A shorter row leaves the rest of its ring empty, as in a year with one ring per month of 28 to 31 days, or today's row of a week that is not over yet.
• Empty cells. NaN (0 / 0 in Slint), and with classes any value that names no class, such as -1, is drawn as the faint track, so the shape of the whole matrix stays visible.
• Limits. Up to 50 rings and 720 segments per ring are drawn; the rest of a larger matrix is left out.

By category, or on a scale

With classes set, each value is a category index, rounded: 0 is the first category, 1 the second, and so on. Each category is a ChartSlice with a label and a color (unset, it takes the theme's next color), and the categories make the legend; clicking an entry hides that category, leaving its cells empty. This suits states and outcomes: passed and failed, up and down, done and skipped. Without categories, the values are colored on a scale, exactly as in a HeatmapChart: from a faint color for the smallest value to the full color for the largest, or with diverging, from negative-color below center-value to color above it. The scale fits the data unless fixed-range is set; the legend under the chart shows it.

import { SegmentedRingChart } from "@slintplot";

SegmentedRingChart {
    title: "Temperature against normal";
    // One ring per year, the oldest outermost; one segment per month.
    values: [
        [-0.6, -0.2, -0.4, 0.1, -0.3, 0.0, 0.2, -0.1, -0.5, -0.2, 0.1, -0.4],
        [-0.1, 0.2, 0.0, -0.3, 0.4, 0.3, 0.1, 0.5, 0.0, 0.2, -0.2, 0.3],
        [0.3, 0.1, 0.6, 0.4, 0.2, 0.8, 0.7, 0.4, 0.5, 0.9, 0.3, 0.6],
        [0.9, 0.7, 1.1, 0.8, 1.3, 1.0, 1.4, 1.2, 0.9, 1.1, 1.5, 1.2],
    ];
    x-labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    y-labels: ["2022", "2023", "2024", "2025"];
    diverging: true;
    color: #e0636b;
    negative-color: #3d8bf2;
    segment-gap: 0.1;
    ring-gap: 0.2;
    value-suffix: "°";
    value-decimals: 1;
    center-text: "+1.1°";
    center-label: "THIS YEAR";
}

The matrix from Rust

A [[float]] property is a model of models in Rust: ModelRc<ModelRc<f32>>. Keep a VecModel per row to change single cells, and one for the rows to add or remove rings; the chart redraws when any of them changes, and takes the new size when rows or columns are added.

// ui/app.slint
import { ChartEngine, SegmentedRingChart } from "@slintplot";
export { ChartEngine } // required, so Rust can connect it

export component App inherits Window {
    in property <[[float]]> runs;
    in property <[string]> days;
    SegmentedRingChart {
        values: root.runs;
        y-labels: root.days;
        classes: [{ label: "Passed" }, { label: "Failed" }];
        show-labels: false;
    }
}

// src/main.rs
use std::rc::Rc;
use slint::{Model, ModelRc, VecModel};

slint::include_modules!();

fn main() -> Result<(), slint::PlatformError> {
    let app = App::new()?;
    slintplot::register!(app);

    // One row per day, 24 runs a day; NaN for runs still to come.
    let today = Rc::new(VecModel::from(vec![f32::NAN; 24]));
    let rows: Rc<VecModel<ModelRc<f32>>> = Rc::new(VecModel::from(vec![
        ModelRc::new(VecModel::from(vec![0.0; 24])), // yesterday: all passed
        ModelRc::from(today.clone()),
    ]));
    app.set_runs(rows.clone().into());
    app.set_days(ModelRc::new(VecModel::from(vec!["Mon".into(), "Tue".into()])));

    // Later: a run finished at 09:00 and failed, so one cell changes.
    today.set_row_data(9, 1.0);
    // A new day is a new ring; the chart makes room for it.
    rows.push(ModelRc::new(VecModel::from(vec![f32::NAN; 24])));

    app.run()
}

Reacting to the chart

Hovering a cell outlines it and writes its value, or its category, in the middle with the row and column labels; a tooltip says the same. hovered-row and hovered-column tell your code which cell that is, and cell-clicked(row, column) reports clicks and Enter. The keyboard works too: click or tab to the chart, then Left and Right go round a ring, Up and Down move between rings, and Home and End go to the first and last cell.

chart := SegmentedRingChart {
    values: root.runs;
    y-labels: root.days;
    x-labels: root.hours;
    cell-clicked(row, column) => {
        root.open-run(row, column);   // a callback of your own
    }
}
Text {
    text: chart.hovered-row < 0 ? "Hover a run" : "Run " + chart.hovered-column + " on day " + chart.hovered-row;
}

Tips

• Many columns: labels round the outside are thinned to every second, third, ... one that fits; with dozens of columns, such as minutes or runs, show-labels: false gives the rings the room, and the tooltip still names each cell.
• Many rings: lower cutout (such as 0.3) for wider rings, or ring-gap for less space between them.
• Big segments, such as one ring of steps: a larger cutout (0.6) leaves room for a large number in the middle, and a smaller segment-gap joins the segments into a ring.
• The middle: center-text is yours to fill, such as a count, a total or a percentage worked out with the data; leave it and center-label empty for no text until a cell is hovered.
• A start mark: show-marker: true puts a dot at start-angle, which helps when the columns run counterclockwise or don't start at 12 o'clock.

Mixed charts

Any dataset in a line or bar chart can be drawn as the other type with series-type. Lines in a bar chart go through the bar centers, and stacking keeps lines and bars apart.

import { BarChart, ChartSeriesType } from "@slintplot";

BarChart {
    title: "Sales";
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    datasets: [
        { label: "2025", values: [12, 15, 11, 14, 17, 19, 16, 13, 18, 21, 24, 28] },
        { label: "2026", values: [14, 16, 15, 18, 20, 22, 19, 17, 21, 25, 27, 31] },
        { label: "Target", values: [15, 15, 16, 17, 18, 19, 19, 19, 20, 22, 24, 26], series-type: ChartSeriesType.line },
    ];
}

100% stacked bars

With stacked-percent: true, each category of a BarChart or HorizontalBarChart is split into the datasets' shares, so every bar fills the axis from 0% to 100%. Labels and tooltips show the percentages. This is the classic chart for survey answers. The percentage labels use largest remainder rounding, so each bar's labels add up to exactly 100%.

Answers with a natural order, from "Every day" to "Never", read best in shades of one color, as in the screenshot and the example below: a fade from dark blue to light blue. Give each dataset its own color, which always wins over the theme; without one, the datasets take the theme's colors.

import { HorizontalBarChart } from "@slintplot";

HorizontalBarChart {
    title: "How often do you work from home?";
    labels: ["Engineering", "Design", "Sales", "Marketing", "Support"];
    datasets: [
        { label: "Every day", values: [24, 16, 5, 12, 8], color: #172f73 },
        { label: "Most days", values: [30, 25, 12, 21, 14], color: #1d4ed8 },
        { label: "Some days", values: [28, 34, 34, 35, 23], color: #3b7ef0 },
        { label: "Rarely", values: [12, 15, 28, 18, 25], color: #5f9cf2 },
        { label: "Never", values: [6, 10, 21, 14, 30], color: #86b6ef },
    ];
    show-values: true;
    fill-opacity: 1;
    bar-border-width: 0;
    stacked-percent: true;
}

TimeSeriesChart

Lines over a time axis. Datasets use points, whose x is the number of seconds after time-origin. The axis picks round times for its ticks: seconds, minutes, hours, days, months or years, depending on the visible range, and the tooltip shows the date and time. Hovering anywhere above or below the lines shows the values at that time. Tick steps follow the visible span, from years down to seconds. When no tick falls on a midnight (or on a January), the first tick also shows the date (or the year), so a zoomed-in axis always says when it is. Zoomed in between points, lines continue to the edges of the plot.

import { TimeSeriesChart } from "@slintplot";

TimeSeriesChart {
    title: "Temperature";
    datasets: [
        {  // One point per hour: x is seconds after the time origin.
            label: "Oslo",
            points: [{ x: 0, y: 8.5 },       { x: 3600, y: 8.1 },    { x: 7200, y: 7.8 },    { x: 10800, y: 7.6 },
                     { x: 14400, y: 7.9 },   { x: 18000, y: 8.6 },   { x: 21600, y: 9.8 },   { x: 25200, y: 11.2 },
                     { x: 28800, y: 12.5 },  { x: 32400, y: 13.4 },  { x: 36000, y: 13.9 },  { x: 39600, y: 14.1 }],
        },
        {
            label: "Bergen",
            points: [{ x: 0, y: 10.2 },      { x: 3600, y: 10.0 },   { x: 7200, y: 9.9 },    { x: 10800, y: 9.8 },
                     { x: 14400, y: 9.9 },   { x: 18000, y: 10.3 },  { x: 21600, y: 10.9 },  { x: 25200, y: 11.6 },
                     { x: 28800, y: 12.2 },  { x: 32400, y: 12.6 },  { x: 36000, y: 12.9 },  { x: 39600, y: 13.0 }],
        },
    ];
    value-suffix: " °C";
    time-origin: { year: 2026, month: 10, day: 11 };
    zoom-enabled: true;
}

All cartesian properties apply as well, including decimate and zoom-enabled. ScatterChart has the same time-axis, time-origin and show-lines properties. x values are 32-bit floats: measured from a nearby origin, they stay exact to the second for about half a year.

GanttChart

One row per task, with a bar from its start to its end on a time axis like the time series': task times are seconds after time-origin, and the ticks fall on round hours, days, weeks or months. Tasks with the same group are placed together under the group's heading and share the group's color. A task's progress fills that share of its bar; a task that ends where it starts is a milestone, drawn as a diamond: filled once reached (progress: 1), an outline before. show-now draws a line at now, such as today. Labels too long for the left column are cut short with an ellipsis. Rows share the height, within min-row-height and max-row-height; when they don't fit, the wheel or a drag scrolls them, and only the rows in view are laid out, so plans of thousands of tasks stay fast. The tooltip shows the task's dates, duration and progress.

import { GanttChart } from "@slintplot";

GanttChart {
    property <float> day: 86400;  // Task times are seconds after the time origin.
    title: "Release 3.0";
    time-origin: { year: 2026, month: 9, day: 7 };
    tasks: [
        { label: "Research", group: "Design", start: 0, end: 10 * day, progress: 1 },
        { label: "Wireframes", group: "Design", start: 7 * day, end: 21 * day, progress: 1 },
        { label: "Visual design", group: "Design", start: 17 * day, end: 31 * day, progress: 0.6 },
        { label: "Concept review", group: "Design", start: 24 * day, end: 24 * day, progress: 1 },  // Reached
        { label: "Backend API", group: "Build", start: 21 * day, end: 56 * day, progress: 0.9 },
        { label: "Web app", group: "Build", start: 28 * day, end: 63 * day, progress: 0.7 },
        { label: "Mobile app", group: "Build", start: 35 * day, end: 70 * day, progress: 0.5 },
        { label: "Feature freeze", group: "Build", start: 70 * day, end: 70 * day },  // Ahead
        { label: "QA and bug fixing", group: "Test", start: 56 * day, end: 84 * day },
        { label: "Public beta", group: "Test", start: 70 * day, end: 84 * day },
        { label: "Docs and website", group: "Launch", start: 70 * day, end: 88 * day },
        { label: "Marketing", group: "Launch", start: 77 * day, end: 91 * day },
        { label: "Release", group: "Launch", start: 91 * day, end: 91 * day },
    ];
    show-now: true;
    now: 53 * day;
    show-values: true;
    zoom-enabled: true;
}

The time axis spans all tasks, with a little room at both ends. The up and down arrow keys move through the tasks, scrolling them into view, and with zoom-enabled the left and right arrows pan. A task whose end is before its start runs from the earlier time to the later, and a task with one missing time is a milestone at the other.

CandlestickChart

Prices over a time axis: for each period, a body from the open to the close, green when the price rose and red when it fell, and a wick from the low to the high. With ohlc: true, each period is a bar from the low to the high with a tick to the left at the open and one to the right at the close. x is the number of seconds after time-origin, ticks fall on round times, and the chart zooms and pans like TimeSeriesChart. The value axis fits the candles in view.

By default the candles sit side by side, skipping the gaps between them such as nights, weekends and holidays; the ticks are at the candles where their dates fall. With skip-gaps: false, the time axis is linear and gaps stay empty.

When there are more candles than room for them, they are merged: the first open, the highest high, the lowest low and the last close, and the tooltip shows the dates they span. On a linear time axis they are merged into hours, days, weeks (from Monday), months, quarters or years in local time; with skip-gaps, into a few candles each, counted from the first. A merged candle at the edge always holds all its candles, so its values don't change while panning, and zooming in shows the single candles again.

show-volume adds a strip of volume bars below the candles, on their own scale; show-last-price draws a dashed line at the last close, labeled on the value axis. Hovering shows a crosshair, labeled with the price and date, and a tooltip with the open, high, low and close, the change from the close before, the volume, and the lines' values. datasets draws lines over the candles, such as a moving average: ChartEngine.moving-average(candles, period) computes one as points, and so does slintplot::candle::moving_average in Rust.

import { CandlestickChart, ChartEngine, ChartTheme } from "@slintplot";

CandlestickChart {
    title: "Acme Robotics";
    candles: [  // One candle per trading day: x is seconds after the time origin.
        { x:       0, open: 119.75, high: 120.68, low: 117.84, close: 117.94, volume: 3420000 },
        { x:   86400, open: 117.99, high: 118.08, low: 116.67, close: 117.38, volume: 2310000 },
        { x:  172800, open: 116.73, high: 116.83, low: 116.36, close: 116.49, volume: 2170000 },
        { x:  259200, open: 116.39, high: 118.43, low: 116.07, close: 118.25, volume: 2890000 },
        { x:  345600, open: 118.43, high: 121.83, low: 117.87, close: 120.99, volume: 4410000 },
        { x:  604800, open: 121.68, high: 122.94, low: 118.85, close: 119.27, volume: 4250000 },
        { x:  691200, open: 118.76, high: 119.20, low: 115.64, close: 116.79, volume: 3660000 },
        { x:  777600, open: 116.34, high: 117.79, low: 115.82, close: 116.89, volume: 3060000 },
        { x:  864000, open: 116.96, high: 117.04, low: 114.44, close: 114.72, volume: 3020000 },
        { x:  950400, open: 114.97, high: 115.41, low: 113.90, close: 114.71, volume: 2680000 },
        { x: 1209600, open: 114.64, high: 115.73, low: 112.75, close: 113.70, volume: 3350000 },
        { x: 1296000, open: 113.35, high: 114.57, low: 112.16, close: 113.85, volume: 2990000 },
        { x: 1382400, open: 114.17, high: 115.51, low: 113.01, close: 113.17, volume: 3380000 },
        { x: 1468800, open: 113.05, high: 114.71, low: 112.39, close: 114.50, volume: 3670000 },
        { x: 1555200, open: 113.87, high: 115.92, low: 113.09, close: 114.87, volume: 3310000 },
        { x: 1814400, open: 115.38, high: 116.35, low: 113.69, close: 114.51, volume: 3270000 },
        { x: 1900800, open: 114.62, high: 115.78, low: 113.21, close: 114.50, volume: 3620000 },
        { x: 1987200, open: 114.47, high: 115.53, low: 113.51, close: 115.45, volume: 3560000 },
        { x: 2073600, open: 115.65, high: 119.56, low: 115.26, close: 118.39, volume: 4750000 },
        { x: 2160000, open: 118.23, high: 119.30, low: 117.57, close: 119.26, volume: 2770000 },
        { x: 2419200, open: 118.79, high: 118.87, low: 115.74, close: 116.82, volume: 4280000 },
        { x: 2505600, open: 116.30, high: 116.84, low: 113.86, close: 115.06, volume: 3300000 },
        { x: 2592000, open: 114.48, high: 115.24, low: 113.12, close: 114.33, volume: 3540000 },
        { x: 2678400, open: 114.77, high: 117.19, low: 114.20, close: 116.80, volume: 3570000 },
        { x: 2764800, open: 116.61, high: 120.15, low: 116.39, close: 118.78, volume: 3920000 },
    ];
    datasets: [{ label: "5-day average", points: ChartEngine.moving-average(self.candles, 5), color: ChartTheme.text-color }];
    time-origin: { year: 2026, month: 9, day: 7 };
    value-prefix: "$";
    value-decimals: 2;
    show-volume: true;
    show-last-price: true;
    zoom-enabled: true;
    // skip-gaps: true;                              // false: a linear time axis, with gaps at weekends
    // ohlc: false;                                  // true: OHLC bars instead of candles
    // increase-color: #10b981;                      // default: ChartTheme.increase-color, a green
    // decrease-color: #f43f5e;                      // default: ChartTheme.decrease-color, a red
}

HeatmapChart

A matrix of colored cells: rows (y-labels) by columns (x-labels), with values in row order. Missing values (NaN) are drawn as empty cells.

import { HeatmapChart } from "@slintplot";

HeatmapChart {
    title: "Visits by weekday and hour";
    x-labels: ["08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18"];
    y-labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
    values: [19, 25, 34, 45, 56, 61, 53, 37, 23, 16, 14,
             16, 23, 36, 53, 62, 57, 45, 33, 24, 19, 16,
             19, 25, 34, 45, 55, 59, 52, 37, 24, 16, 14,
             16, 23, 35, 52, 63, 59, 45, 33, 24, 19, 16,
             19, 26, 35, 45, 54, 58, 52, 38, 24, 17, 14,
              7,  9, 14, 21, 25, 24, 19, 13, 10,  8,  7,
              8, 11, 15, 19, 22, 23, 20, 15, 10,  7,  6];
    value-suffix: " visits";
    show-values: true;     // the number in each cell
}

A diverging scale suits values around a center, such as correlations:

MatrixChart

A dot matrix: rows (y-labels) by columns (x-labels), with values in row order like a HeatmapChart, but each cell holds a circle whose area is proportional to its value. Sizes compare more precisely than shades, so it suits sales by product and region, feature scores across tools, or survey answers by group. Zero and missing values draw nothing, or a short dash with show-empty; negative values are hollow circles, or with color-mode: sign filled in negative-color. A size legend under the chart shows round values at the chart's scale, and the circles grow in when the chart appears and resize when the values change.

import { MatrixChart, ChartMatrixColorMode } from "@slintplot";

MatrixChart {
    title: "Cups sold by drink and hour";
    x-labels: ["07", "08", "09", "10", "11", "12", "13", "14"];
    y-labels: ["Latte", "Cappuccino", "Espresso", "Flat white", "Mocha", "Tea"];
    values: [55, 96, 84, 61, 44, 40, 52, 36,
             48, 82, 70, 52, 35, 30, 38, 25,
             42, 68, 55, 38, 30, 34, 45, 28,
             30, 58, 51, 40, 28, 24, 31, 20,
             12, 20, 24, 22, 18, 21, 26, 30,
              8, 14, 18, 20, 24, 35, 38, 46];
    color-mode: ChartMatrixColorMode.rows;    // a theme color per drink
    size-label: "Cups";
    show-values: true;
    show-totals: true;
    x-labels-top: true;                       // hours above, totals below
}

A second measure can color the circles while their size shows the first, such as sales colored by growth on last year:

MatrixChart {
    x-labels: root.regions;
    y-labels: root.products;
    values: root.sales;
    color-mode: ChartMatrixColorMode.scale;
    color-values: root.growth;                // blue for growth, the theme's red for decline
    size-label: "Sales";
    color-label: "Growth";
    value-prefix: "$";
    value-suffix: "M";
    color-value-suffix: ChartTexts.percent;
}

Large matrices stay fast: when cells get smaller than a few pixels, as with 500 by 500 values on a small chart, neighboring cells merge into one circle that shows the value farthest from zero, while the tooltip still reads the exact cell under the mouse.

CalendarHeatmap

A year (or any span) of daily values, like GitHub's contribution graph: one column per week, one row per weekday, with month and weekday labels and a "Less … More" legend. Days are colored in levels steps, split by quantiles of the positive values, so a few very active days don't wash out the rest; zero or missing days are empty. The days take the theme's first color, in lighter shades for fewer contributions; set color for another, such as GitHub's green.

import { CalendarHeatmap, ChartTheme } from "@slintplot";

CalendarHeatmap {
    title: "Contributions in the last year";
    start-date: { year: 2025, month: 10, day: 26 };
    values: root.daily-counts;                        // one value per day
    color: ChartTheme.dark ? #39d353 : #216e39;       // GitHub's green; default ChartTheme.colors[0]
    value-suffix: " contributions";
}

TileGridChart

A matrix as rows of rounded squares, one per value, like an activity grid. It takes its data as a SegmentedRingChart does: values is a matrix, [[float]], one row of tiles per row, and the chart takes its size from it, as many rows as the matrix has and as many columns as its longest row. The tiles stay square, as large as fit, and the grid is centered. Shorter rows and missing values (NaN) are empty tiles, a faint track. Cells are colored on a scale, with the same properties as a HeatmapChart, or by category: with classes set, each value is the index of its category, and the categories make the legend. y-labels go at the left and x-labels below, thinned to those that fit.

Use a TileGridChart where the cells should look alike and square, such as days or builds, and a HeatmapChart where the cells should fill the space or show their numbers.

import { TileGridChart } from "@slintplot";

TileGridChart {
    title: "Practice hours";
    // One row per weekday, one column per week. This week has only reached
    // Wednesday, so the rows after it are shorter and end in the track.
    values: [
        [1.2, 0, 0, 1.2, 0, 0, 0, 2.2, 0, 0.4],
        [1.7, 1.4, 1.7, 1.8, 1.9, 2.5, 0, 1.3, 1, 0.5],
        [0.7, 1.6, 1.4, 2.6, 1.3, 0, 0, 2.1, 2.7, 1.7],
        [2, 0.8, 0.5, 0.9, 0, 1.6, 0, 0, 0],
        [0, 1.8, 1.9, 1.9, 2.3, 1.9, 2.2, 0, 0.2],
        [0.9, 1.1, 0, 0.2, 0, 1.4, 0, 0, 1.8],
        [0, 1.1, 0.9, 0, 0, 0, 0, 1.1, 0.2],
    ];
    y-labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
    x-labels: ["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8", "W9", "W10"];
    color: #e8916a;
    value-suffix: " h";
}

By category, each value names its category, and -1 or NaN leaves the tile empty:

import { TileGridChart } from "@slintplot";

TileGridChart {
    title: "Service status, last 14 days";
    // 0: up, 1: degraded, 2: down, -1: not monitored yet.
    values: [
        [0, 0, 0, 0, 0, 1, 2, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 2, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0],
        [-1, -1, -1, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0],
    ];
    y-labels: ["API", "Web", "Search", "Billing", "Mail"];
    x-labels: ["20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "1", "2"];
    classes: [
        { label: "Up", color: #2fb67c },
        { label: "Degraded", color: #f2b33d },
        { label: "Down", color: #e0636b },
    ];
}

From Rust, the matrix is a model of models, as for a SegmentedRingChart; a changed cell redraws the chart. Large matrices stay fast: the tiles are drawn as one path per color, tiles too small for visible corners are drawn as squares, and a matrix is cut to its first 200 rows and 1,000 columns.

TreemapChart

One rectangle per item, with an area proportional to its value, laid out with the squarified algorithm so the rectangles stay close to square. Items with the same group are placed together under the group's label and share the group's color; the legend lists the groups, and clicking one hides it. Without groups, every item gets its own theme color and there is no legend. Missing, zero and negative values take no space. Labels and values are written in the rectangles where they fit, in white or dark text depending on the fill.

import { TreemapChart } from "@slintplot";

TreemapChart {
    title: "World population (millions)";
    items: [
        { label: "India", value: 1464, group: "Asia" },
        { label: "China", value: 1416, group: "Asia" },
        { label: "Indonesia", value: 285, group: "Asia" },
        { label: "Pakistan", value: 255, group: "Asia" },
        { label: "Bangladesh", value: 175, group: "Asia" },
        { label: "Nigeria", value: 237, group: "Africa" },
        { label: "Ethiopia", value: 135, group: "Africa" },
        { label: "Egypt", value: 118, group: "Africa" },
        { label: "United States", value: 347, group: "Americas" },
        { label: "Brazil", value: 212, group: "Americas", color: transparent },  // transparent: the group's color
        { label: "Mexico", value: 132, group: "Americas" },
        { label: "Russia", value: 144, group: "Europe" },
        { label: "Germany", value: 84, group: "Europe" },
    ];
    value-suffix: " M";
}

SunburstChart

A hierarchy drawn as rings: the top level innermost, and each item's angle its share of its parent. Items name their parent by index, and a parent must come before its children; an item whose parent is -1 (or invalid) is top-level. Leave a parent's value at 0 and it is the sum of its children; a parent with a larger value of its own keeps the rest of its angle empty. Top-level items take the theme's colors in order and their children a lighter shade of their parent's. Clicking an item with children zooms into it, so that it fills the rings; clicking the center zooms back out. The center shows the total of what is shown. Labels are written on the arcs where they fit, and the legend lists the top-level items.

import { SunburstChart } from "@slintplot";

SunburstChart {
    title: "World population (millions)";
    items: [
        { label: "Asia", parent: -1 },                // 0: its value is the sum of its children
        { label: "South Asia", parent: 0 },           // 1
        { label: "India", value: 1464, parent: 1 },
        { label: "Pakistan", value: 255, parent: 1 },
        { label: "Bangladesh", value: 175, parent: 1 },
        { label: "East Asia", parent: 0 },            // 5
        { label: "China", value: 1416, parent: 5 },
        { label: "Japan", value: 123, parent: 5 },
        { label: "Southeast Asia", parent: 0 },       // 8
        { label: "Indonesia", value: 285, parent: 8 },
        { label: "Philippines", value: 116, parent: 8 },
        { label: "Africa", parent: -1 },              // 11
        { label: "Nigeria", value: 237, parent: 11 },
        { label: "Ethiopia", value: 135, parent: 11 },
        { label: "Egypt", value: 118, parent: 11 },
        { label: "Americas", parent: -1 },            // 15
        { label: "United States", value: 347, parent: 15 },
        { label: "Brazil", value: 212, parent: 15 },
        { label: "Mexico", value: 132, parent: 15 },
        { label: "Europe", parent: -1, color: transparent },  // 19; transparent: the theme's next color
        { label: "Russia", value: 144, parent: 19 },
        { label: "Germany", value: 84, parent: 19 },
        { label: "France", value: 66, parent: 19, hidden: false },
    ];
    value-suffix: " M";
}

FunnelChart

The stages as slices of one funnel: each slice is as wide at the top as its value and narrows to the next stage, with curved sides. Stages fade from color at the top to lighter shades below (darker in dark mode), so the order reads in the color; a stage's own color wins. Each slice shows its value and its share of the first stage, beside the slice when it is too narrow, and badges on the right show the share of the previous stage each one kept. Hovering a stage fades the others. With so many stages that the rows are too short for text, the names, values and badges are left out, and the tooltip shows them. Stages are ChartSlices, as in pie charts.

import { FunnelChart } from "@slintplot";

FunnelChart {
    title: "Visitors to purchases";
    stages: [
        { label: "Visited the site", value: 12400 },
        { label: "Viewed a product", value: 7350 },
        { label: "Added to cart", value: 3120 },
        { label: "Started checkout", value: 1840 },
        { label: "Purchased", value: 1150, color: transparent, hidden: false },  // transparent: the fade
    ];
}

WaterfallChart

Each step's bar floats from the running total before it to the total after it: green when it adds, red when it takes away. Steps with total: true are bars from zero to the running total, in the theme's first color, and their value is ignored. Thin lines connect each bar's end to the next bar. The value axis always includes zero; the tooltip shows the change and the running total. Negative values are written with the sign before the prefix: "-$48k".

import { WaterfallChart } from "@slintplot";

WaterfallChart {
    title: "Profit and loss";
    steps: [
        { label: "Revenue", value: 420 },
        { label: "Cost of sales", value: -185 },
        { label: "Gross profit", total: true },
        { label: "Marketing", value: -48 },
        { label: "R&D", value: -62 },
        { label: "Admin", value: -31 },
        { label: "Operating profit", total: true },
        { label: "Tax", value: -22 },
        { label: "Net profit", total: true },
    ];
    show-values: true;
    increase-color: #10b981;                          // default: ChartTheme.increase-color, a green
    decrease-color: #f43f5e;                          // default: ChartTheme.decrease-color, a red
    value-prefix: "$";
    value-suffix: "k";
}

DumbbellChart

One row per category, with a dot for each dataset's value and a bar joining the smallest to the largest: a compact way to compare two values per category, such as before and after. It takes labels and datasets like a horizontal bar chart, and works with more than two datasets too. With exactly two, the tooltip also shows the change from the first to the second.

import { DumbbellChart } from "@slintplot";

DumbbellChart {
    title: "Life expectancy at birth (years)";
    labels: ["Japan", "Norway", "China", "United States", "Brazil", "India", "South Africa", "Nigeria"];
    datasets: [
        { label: "2000", values: [81.1, 78.7, 71.4, 76.6, 70.1, 62.7, 56.0, 46.3] },
        { label: "2023", values: [84.7, 83.3, 78.6, 78.4, 75.8, 72.0, 65.0, 54.5] },
    ];
    show-values: true;
    bar-color: gray;                                  // default: between the grid and axis colors
}

GaugeChart

An arc from min-value to max-value, centered at the top and covering sweep degrees, in one of two styles after common dashboard gauges:

• Fill (the default), like ApexCharts radial bars and Highcharts solid gauges: a thick track with rounded ends, filled up to value, with the value large in the middle and the minimum and maximum at the ends. bands are drawn as a thin ring outside the track, like Grafana's threshold markers, and the fill takes the color of the band the value is in.
• Needle (show-needle: true), like ECharts gauges: the bands as a thinner arc, with major and minor ticks and their labels inside it, and a needle pointing at the value, which is written below the hub.

The value is sized to the gauge, and the gauge moves smoothly to new values. Hovering a band shows its range.

import { GaugeChart } from "@slintplot";

GaugeChart {
    title: "CPU temperature";
    value: 77;
    label: "Package";
    bands: [
        { to: 60, label: "Normal", color: #10b981 },
        { to: 85, label: "Warm", color: #f59e0b },
        { to: 100, label: "Hot", color: transparent },  // transparent: the theme's next color
    ];
    min-value: 20;
    show-needle: true;
    sweep: 240;
    show-legend: true;
    value-suffix: " °C";
    value-decimals: 0;
}

BulletChart

Rows of a bar for a value and a mark for its target, over shaded bands such as poor, OK and good, after Stephen Few's bullet graphs: a compact alternative to a row of gauges, for dashboards and small screens. Each row has its own value axis, so measures in different units fit in one panel; shared-axis: true puts them all on one. The axis ends with the last band. Bands are ChartGaugeBands, the row's own or the chart's, in any order; those without a color are three steps of gray, the first the darkest, which suit the theme in light and dark mode. Each value is written at the end of its row; the tooltip adds the target, how far the value is from it ("+$20 (108% of target)") and the band it is in. below-target-color colors the bars of rows that fall short, and a row's own color overrides the chart's. A target of 0 counts as none, so rows can leave it out; set has-target: true for a real target of 0. With fixed-range, a value beyond the axis ends in an arrow. vertical: true turns the rows into columns, with the values under them.

import { BulletChart, ChartTheme } from "@slintplot";

BulletChart {
    title: "Sales, year to date";
    below-target-color: ChartTheme.decrease-color;
    rows: [
        { label: "Revenue", sublabel: "US$ (1,000s)", value: 270, target: 250, prefix: "$",
          bands: [{ to: 150, label: "Poor" }, { to: 225, label: "OK" }, { to: 300, label: "Good" }] },
        { label: "Profit", sublabel: "%", value: 22.5, target: 26, suffix: "%",
          bands: [{ to: 20, label: "Poor" }, { to: 25, label: "OK" }, { to: 30, label: "Good" }] },
        { label: "Order size", sublabel: "US$, average", value: 320, target: 550, prefix: "$",
          bands: [{ to: 350, label: "Poor" }, { to: 500, label: "OK" }, { to: 600, label: "Good" }] },
        { label: "New customers", sublabel: "count", value: 1650, target: 2100,
          bands: [{ to: 1400, label: "Poor" }, { to: 2000, label: "OK" }, { to: 2500, label: "Good" }] },
        { label: "Satisfaction", sublabel: "of 5", value: 4.5, target: 4.2,
          bands: [{ to: 3.5, label: "Poor" }, { to: 4.25, label: "OK" }, { to: 5, label: "Good" }] },
    ];
}

Axes and formatting

Cartesian charts and HorizontalBarChart share these axis options:

• Titles: x-title below the x axis, y-title above the y axis.
• Fixed range: fixed-range: true with min-value and max-value, so the axis stays put when the data changes.
• Logarithmic axis: logarithmic: true, with ticks at 1, 2 and 5 times powers of ten. Values that aren't positive are left out.
• Formatting: value-prefix, value-suffix and value-decimals (-1 for automatic) apply to the value axis, tooltips and data labels. Pies and radar charts have them too. A minus sign goes before the prefix: "-$5". Separators and dates follow ChartTheme.language (see Languages).

import { LineChart } from "@slintplot";

LineChart {
    title: "Users";
    labels: ["2019", "2020", "2021", "2022", "2023", "2024", "2025", "2026"];
    datasets: [
        { label: "Users", values: [12, 85, 340, 1200, 2900, 9800, 26000, 61000], tension: 0.3 },
        { label: "Paying", values: [1, 6, 30, 95, 260, 800, 2300, 5900], tension: 0.3 },
    ];
    logarithmic: true;
    y-title: "Users (log scale)";
    value-suffix: " users";
}

A second value axis

Datasets with right-axis: true are plotted against a second value axis on the right, for two measures of different size or unit in one chart. Each axis shows while a visible dataset uses it, as with Chart.js' display: 'auto': hide the right-axis datasets from the legend and the right axis goes, and the plot widens; hide the left ones and the grid follows the right axis. The right axis has its own settings: y2-title, y2-value-prefix, y2-value-suffix, y2-value-decimals, y2-fixed-range with y2-min-value and y2-max-value, y2-logarithmic and y2-begin-at-zero. Tooltips and data labels write each value in its own axis' format, and stacked datasets stack on their own axis.

The right axis gets as many ticks as the left one, at steps such as 15 or 40, so its ticks sit on the left axis' grid lines. When either axis is fixed or logarithmic they can't line up; then the right axis chooses its own ticks, without grid lines. It works in LineChart, BarChart, ScatterChart, BubbleChart and TimeSeriesChart; other charts ignore right-axis.

import { BarChart, ChartSeriesType } from "@slintplot";

BarChart {
    title: "Temperature and rainfall, Oslo";
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    datasets: [
        { label: "Temperature", values: [-4.3, -4.0, -0.2, 4.5, 10.8, 15.2, 16.4, 15.2, 10.8, 6.3, 0.7, -3.1], series-type: ChartSeriesType.line, tension: 0.4 },
        { label: "Rainfall", values: [49, 36, 47, 41, 53, 65, 81, 89, 90, 84, 73, 55], right-axis: true },
    ];
    y-title: "Temperature";
    value-suffix: " °C";
    y2-title: "Rainfall";
    y2-value-suffix: " mm";
}

Two value axes are easy to misread: the heights of the two datasets can't be compared, and where they cross means nothing. Give both axes a title, and make it clear which dataset belongs to which, for example with a line for one and bars for the other.

Data labels

show-values: true writes each value next to its bar or point, or inside stacked segments. Pies write the value inside each slice, or its share with show-percentages: true; slices too thin for a label get none.

import { BarChart } from "@slintplot";

BarChart {
    title: "Revenue";
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
    datasets: [
        { label: "Revenue", values: [7869, 5941, 5946, 8210, 9120, 8655] },
    ];
    show-values: true;
    x-title: "Month";
    y-title: "Revenue (USD)";
    value-prefix: "$";
    value-decimals: 0;
}

Cartesian properties

LineChart, BarChart, ScatterChart and BubbleChart share these properties.

Callbacks and functions

Data types

ChartDataset

ChartXY

{ x: float, y: float, r: float }. A scatter or bubble point; r is the bubble radius in pixels and is ignored by scatter charts.

ChartSlice

{ label: string, value: float, color: color, hidden: bool }. A pie, doughnut or polar area slice, a funnel stage or a radial bar.

ChartTreemapItem

{ label: string, value: float, group: string, color: color }. A treemap item. Items with the same group are placed together; leave color unset to use the group's color, or the theme's next color for items without a group.

ChartSunburstItem

{ label: string, value: float, parent: int, color: color, hidden: bool }. A sunburst item. parent is the index of an earlier item, or -1 for the top level. Leave a parent's value at 0 to use the sum of its children, and color unset for the theme's color (top level) or a lighter shade of the parent's.

ChartGanttTask

{ label: string, start: float, end: float, group: string, color: color, progress: float }. A Gantt chart task. start and end are seconds after the chart's time-origin; a task with end equal to start is a milestone, filled when its progress is 1. Tasks with the same group are placed together under its heading; leave color unset to use the group's color. progress is the share done, from 0 to 1.

ChartWaterfallStep

{ label: string, value: float, total: bool }. A waterfall step: a change, or with total: true, the running total so far.

ChartCandle

{ x: float, open: float, high: float, low: float, close: float, volume: float }. A period of a candlestick chart: its time, in seconds after time-origin, its first, highest, lowest and last value, and the volume traded in it (0 when unknown). A missing open or close takes the other's value.

ChartGaugeBand

{ to: float, label: string, color: color }. A gauge band, from where the previous one ends (or min-value) to to. Leave color unset for the theme's next color.

ChartBullet

{ label: string, sublabel: string, value: float, target: float, has-target: bool, bands: [ChartGaugeBand], color: color, prefix: string, suffix: string }. A row of a bullet chart. sublabel is a smaller line under the label, such as the unit. A target of 0 counts as none, unless has-target is set. Leave bands empty to use the chart's, color unset for the chart's, and prefix and suffix empty to use its value-prefix and value-suffix. Bands start at the start of the row's axis; those without a color are steps of gray, the first the darkest.

ChartHit

{ dataset: int, index: int, x: float, y: float, r: float }. The point under the mouse in a scatter or bubble chart, with its position in pixels. dataset is -1 when there is none.

ChartDateTime

{ year: int, month: int, day: int, hour: int, minute: int, second: int }. A date and time in UTC, such as a time-origin or start-date: { year: 2026, month: 10, day: 25 }.

ChartFormat

{ prefix: string, suffix: string, decimals: int }. How a value is written; decimals: -1 chooses automatically. Charts build it from their value-prefix, value-suffix and value-decimals properties.

ChartLocale

How numbers and dates are written, and the charts' few built-in texts. Empty fields, and name lists of the wrong length, are English.

Enums

Theming

The ChartTheme global styles every chart. Assign its properties anywhere, for example in your window's init. Colors follow light and dark mode automatically through Slint's Palette.color-scheme.

import { ChartPalette, ChartTheme } from "@slintplot";

export component App inherits Window {
    init => {
        ChartTheme.palette = ChartPalette.corporate;
        ChartTheme.fill-opacity = 0.6;
        // Or a custom palette:
        // ChartTheme.colors = [#0b6e4f, #f4a259, #5b8e7d, #bc4b51];
    }
}

Palettes

Datasets and slices without their own color take the colors of the palette in order.

Each palette has separate dark mode colors. Neighboring colors, and the first three, stay distinct with red-green color blindness.

Languages

ChartTheme.language sets how every chart writes numbers and dates: the decimal and thousands separators, the percent sign, and the month and weekday names and date order on time axes, tooltips and calendar heatmaps. It also translates the charts' few built-in texts, such as "Less" and "More" under a calendar heatmap, a waterfall's legend and "No data" in tooltips. Prefixes and suffixes stay as you set them, so a currency goes where value-prefix or value-suffix puts it.

import { ChartLanguage, ChartTheme } from "@slintplot";

export component App inherits Window {
    init => {
        ChartTheme.language = ChartLanguage.german;
    }
}

For other conventions, assign your own ChartLocale to ChartTheme.locale. Fields you leave out are English:

// Swiss numbers, English dates.
ChartTheme.locale = { decimal: ".", group: "'" };

The ChartTexts global has the built-in texts in the current language, with English for empty fields, for your own labels next to the charts. ChartTexts.percent is the percent sign, with the space some languages put before it, for a value-suffix:

import { ChartTexts, GaugeChart } from "@slintplot";

GaugeChart {
    value: 72;
    value-suffix: ChartTexts.percent;  // "72%", or "72 %" in German
}

To follow the user's system language, read it in Rust, for example with the sys-locale crate, and set the language. Export ChartTheme and ChartLanguage from your root .slint file to reach them from Rust:

let language = match sys_locale::get_locale().unwrap_or_default().get(..2) {
    Some("de") => ChartLanguage::German,
    Some("nb" | "nn" | "no") => ChartLanguage::Norwegian,
    Some("sv") => ChartLanguage::Swedish,
    _ => ChartLanguage::English,
};
app.global::<ChartTheme>().set_language(language);

Japanese and Chinese need a font with their characters. Desktop systems have one; in the browser, Slint only has its built-in Inter font, so the web gallery leaves these two languages out.

The gallery's Languages sample, under Advanced, switches a chart between the 14 languages. The app translates the chart's title and dataset names itself; everything else comes from the library.

ChartTheme properties

Interaction

• Tooltips and highlights. Line, bar and radar charts show every dataset's value for the category under the mouse. Scatter and bubble charts show the nearest point, pies the slice under the mouse, and treemaps and sunbursts the item under the mouse with its share of the total. Funnels add each stage's share of the first and previous stage, waterfalls the running total, dumbbells the change between two datasets, gauges the band under the mouse, bullet charts the value, target, distance to the target and band of a row, and radial bar charts the value of a ring, which stands out while the others fade. Matrix charts show the row, column and value of the cell under the mouse, with its color value, and light up its row and column.
• Legend. Clicking an entry toggles the dataset's or slice's hidden flag; the axes rescale to the visible data. In a treemap, it hides or shows a group, and in a sunburst a top-level item.
• Clicks. category-clicked, point-clicked, slice-clicked, item-clicked, stage-clicked, step-clicked, task-clicked, bar-clicked and cell-clicked report what was clicked. Clicking a sunburst item with children zooms into it, and clicking the center zooms out.
• Keyboard. Every chart can be used without a mouse. Click a chart (or tab to it) and a focus ring appears; the arrow keys then move the highlight and tooltip, Home and End jump to the ends, and Enter clicks. Charts report their title as an accessibility label.

  Chart	Arrow keys
  Line, bar, horizontal bar	Left and Right move through the categories
  Scatter, bubble, time series	Left and Right move through a dataset's points in x order; Up and Down move to another dataset, at the point closest in x
  Pie, doughnut, polar area, radar	Move around the slices or spokes
  Heatmap, matrix, tile grid	Move from cell to cell
  Calendar heatmap	Left and Right move a week, Up and Down a day
  Treemap	Move through the items, group by group and largest first
  Sunburst	Move through the items, each parent before its children; Enter also zooms into an item with children, and Escape or Backspace zooms out
  Funnel, dumbbell, bullet	Move through the stages or rows
  Radial bar	Move through the rings, from the outside in
  Segmented ring	Left and Right go round a ring, Up and Down move out and in
  Waterfall	Move through the steps
  Gantt	Up and Down move through the tasks, scrolling them into view; with zoom-enabled, Left and Right pan
  Gauge	None: a gauge shows one value, which its accessibility description reads out

• Zoom and pan. With zoom-enabled: true, the mouse wheel zooms around the mouse, dragging pans and double-clicking resets. The value axis fits the visible data.

chart := LineChart {
    zoom-enabled: true;
    labels: root.days;
    datasets: root.measurements;
    category-clicked(index) => { root.selected-day = index; }
}

Button {
    text: "Show the last 10%";
    clicked => { chart.view-start = 0.9; chart.view-end = 1.0; }
}

Updating data from Rust

Datasets and slices are ordinary Slint models. Use a VecModel and change rows; the chart updates on its own.

use std::rc::Rc;
use slint::{Model, ModelRc, VecModel};

slint::include_modules!();

fn main() -> Result<(), slint::PlatformError> {
    let app = App::new()?;
    slintplot::register!(app);

    let values = Rc::new(VecModel::from(vec![3.0, 7.0, 4.0]));
    let datasets = Rc::new(VecModel::from(vec![ChartDataset {
        label: "Sales".into(),
        values: values.clone().into(),
        tension: 0.4,
        ..Default::default()
    }]));
    app.set_datasets(datasets.clone().into());

    // Later: append a value, or replace a row.
    values.push(9.0);
    if let Some(mut ds) = datasets.row_data(0) {
        ds.fill = true;
        datasets.set_row_data(0, ds);
    }
    app.run()
}

Here App declares in-out property <[ChartDataset]> datasets; and passes it to a chart with datasets <=> root.datasets;. The generated Rust types (ChartDataset, ChartXY, ChartSlice, ...) come from slint::include_modules!().

Streaming

For live data, give a dataset a model that appends new values and drops the oldest. Charts read their models on demand and follow the model's change notifications, so an update costs one frame, not a copy of the data. VecModel works for small windows, but remove(0) moves every remaining value. For large windows, use a ring buffer, like the StreamModel in the example apps (stream_model.rs, about 70 lines):

/// The latest `capacity` values of a stream.
pub struct StreamModel<T> {
    values: RefCell<VecDeque<T>>,
    capacity: usize,
    notify: ModelNotify,
}

impl<T: Clone + 'static> StreamModel<T> {
    /// Appends values, dropping the oldest ones beyond the capacity.
    pub fn extend(&self, new: impl IntoIterator<Item = T>) {
        let mut values = self.values.borrow_mut();
        let before = values.len();
        values.extend(new);
        let added = values.len() - before;
        let dropped = values.len().saturating_sub(self.capacity);
        values.drain(..dropped);
        let len = values.len();
        drop(values);
        if added == 0 {
            return;
        }
        if dropped >= before {
            self.notify.reset();
        } else {
            if dropped > 0 {
                self.notify.row_removed(0, dropped);
            }
            self.notify.row_added(len - added, added);
        }
    }
}

impl<T: Clone + 'static> Model for StreamModel<T> {
    type Data = T;
    fn row_count(&self) -> usize { self.values.borrow().len() }
    fn row_data(&self, row: usize) -> Option<T> { self.values.borrow().get(row).cloned() }
    fn model_tracker(&self) -> &dyn ModelTracker { &self.notify }
}

// A time series dataset of the latest 10,000 points:
let points = Rc::new(StreamModel::new(10_000, Vec::new()));
datasets.push(ChartDataset { points: points.clone().into(), ..Default::default() });
// Later, from a timer:
points.extend(new_points);

• Batch the samples. Data can arrive far faster than a screen refreshes. Collect the samples that arrived since the last frame and add them with one extend per frame, from a slint::Timer of about 16 ms; the stress app streams 100,000 samples a second this way.
• Keep time series in time order. TimeSeriesChart finds the visible points with a binary search, so each dataset's points must be sorted by x. Appending newer points keeps them sorted. Scatter and bubble charts take points in any order.
• Let the x axis move. In line and bar charts, stream the labels along with the values (another StreamModel), so the categories move with the data. Time series axes follow the points' times on their own.
• Mind the window size. How many values a chart can show and still update at 60 frames per second depends on the chart and the machine; see streaming limits.

The gallery's Live data sample streams a time series at 10 to 60 updates a second, and the stress app streams up to 8 datasets at up to 100,000 samples a second, with windows from 1,000 values to everything it has received.

Memory stays level however long the app runs: a StreamModel holds at most its capacity, and the charts keep nothing between frames that grows with time. The fuzz app's soak test renders the same data over and over, with hovering, clicks, scrolling and keys, and checks that memory in use stops growing. In 10 minutes, 7,760 rounds of all 18 chart components, it went from 870 KB after the first rounds to 874 KB at the end.

Data from other threads

Slint models live on the UI thread: a VecModel or StreamModel can't be sent to another thread, and changing one from elsewhere doesn't compile. Read the data on any thread or async task, send it to the UI thread, and change the models there. Two ways:

• A stream of samples (a serial port, a socket, a sensor): send them through a channel, and move what arrived into the model once a frame, from a slint::Timer. This also batches the samples, as Streaming recommends.
• An occasional result (a database query, a file): pass a closure to the UI thread with upgrade_in_event_loop on the component's weak handle, or slint::invoke_from_event_loop.

use std::rc::Rc;
use std::sync::mpsc;
use std::time::Duration;
use slint::{Timer, TimerMode, VecModel};

// A thread, or a tokio task, reads the samples and sends them on.
let (tx, rx) = mpsc::channel::<f32>();
std::thread::spawn(move || loop {
    let sample = read_sensor();
    if tx.send(sample).is_err() {
        break; // The app has closed.
    }
});

// On the UI thread, once a frame: move what arrived into the model.
let values = Rc::new(StreamModel::new(10_000, Vec::new()));
let timer = Timer::default();
timer.start(TimerMode::Repeated, Duration::from_millis(16), {
    let values = values.clone();
    move || values.extend(rx.try_iter())
});

// A one-off result: build the models on the UI thread.
let weak = app.as_weak();
std::thread::spawn(move || {
    let rows: Vec<f32> = fetch_rows();
    weak.upgrade_in_event_loop(move |app| {
        let values = Rc::new(VecModel::from(rows));
        // ... put `values` in a ChartDataset and set it on `app`.
    })
    .ok();
});

Keep the Timer alive as long as the chart updates: dropping it stops it. With tokio, use tokio::sync::mpsc and its try_recv in the same way, or call upgrade_in_event_loop from the task; Slint's event loop runs on the main thread, so run tokio on its own threads.

Large datasets

• Turn off point markers with show-points: false. Each marker is an element.
• Keep decimation on (decimate: true, the default). A line with more than twice as many points as pixels is drawn as one span per pixel column, which looks the same and draws far faster: about 240 ms instead of 17 s for 3 lines of 1,000,000 points in the software renderer.
• Zoom in. Values are read from the models on demand, so a zoomed-in chart reads only the visible values, and changes outside the view cause no work.

Measured on an Apple M4 with Slint's software renderer on one core, 1280×800 pixels, three datasets of 1,000,000 points each, decimation on (see Benchmarks for how):

How decimation works

Line charts, time series and scatter charts with show-lines: true decimate a line when it has more than twice as many points as the plot is wide in pixels. Within each pixel column, the line becomes one vertical span from the lowest to the highest point in the column, joined to the previous column. In line charts, a filled area keeps the first, lowest, highest and last point of each column.

• Peaks are kept. The lowest and highest value of every column are always drawn, so a single spike among a million points still shows. What is lost is detail inside a column: two values a pixel apart look like one span.
• Lines are straight. tension and stepped don't apply while a line is decimated, and point markers aren't drawn. Zoom in until there are fewer than two points per pixel, and the line is drawn as usual again.
• The points must be in x order. Decimation groups neighbouring points by pixel column; SlintPlot doesn't sort them. Line and bar charts are always in order, since the x axis is the index. For time series, points must be sorted by time anyway (see Streaming): out of order, points can be missing from the view, and the line jumps back and forth. A scatter chart with lines joins the points in data order, decimated or not, so sort them by x first if the line should go left to right.
• Only what is shown is decimated. The data in your models isn't changed. Tooltips and hovered-index report the real values.

Missing and invalid values

NaN and infinite values mark a value as missing; both behave the same. A missing value never stops a chart: it is left out, and the axes are computed from the remaining values.

Values outside a fixed range (fixed-range: true) lie off the plot, which is then clipped: lines towards them end at its edge. On a logarithmic axis, zero and negative values lie below the bottom of the axis.

Settings are kept to what can be drawn: tension above 1 draws as 1, a CalendarHeatmap has 1 to 20 levels, and a line or bar chart zoomed in to less than one category shows one category across the plot.

The fuzz app feeds every chart random data with NaN, infinities, the largest and smallest floats, empty and very long lists, and out-of-range settings, renders it at sizes down to 1×1 pixel, and moves the mouse and keyboard over it, checking that nothing panics, hangs or runs out of memory.

Rust API

slintplot::library_path() -> PathBuf

The path to the library's .slint entry point, for CompilerConfiguration::with_library_paths in build.rs. Register it under the name slintplot to import from "@slintplot".

slintplot::register!(component)

Connects the ChartEngine global of a component to SlintPlot. Call it once after creating the component. The Chart* types generated by slint::include_modules!() must be in scope where you call it, and the root .slint file must export { ChartEngine }.

slint::include_modules!();
let app = App::new()?;
slintplot::register!(app);

slintplot::profile

Layout modules advanced

The geometry behind the components is public, for tests, custom renderers or server-side use. These modules may change before 1.0.

use slintplot::ticks::{NiceScale, format_tick};

let scale = NiceScale::new(3.0, 97.0, 6);
assert_eq!((scale.min, scale.max, scale.step), (0.0, 100.0, 20.0));
let labels: Vec<String> = scale.ticks().iter().map(|&v| format_tick(v, scale.step)).collect();
// ["0", "20", "40", "60", "80", "100"]

ChartEngine

ChartEngine is the Slint global that the chart components call to compute their geometry. You don't call it yourself, but it has to be exported from your root .slint file so that register! can connect it. Its pure callbacks include layout, value-axis, pie-layout, radar-layout, treemap-layout, sunburst-layout, funnel-layout, waterfall-layout, dumbbell-layout, gantt-layout, gauge-layout, bullet-layout, candle-layout, radial-bar-layout, matrix-layout, the hit tests and format-value. moving-average(candles, period) is for you: the simple moving average of the closes, as points for a line over a CandlestickChart; in Rust, slintplot::candle::moving_average computes the same.

Example apps

Two apps show the library in use. They are published on crates.io, so you can install them with Cargo (Rust 1.88 or later):

cargo install slintplot-gallery
cargo install slintplot-stress

Then run slintplot-gallery or slintplot-stress. On Linux, Slint needs the fontconfig and xkbcommon development packages first, such as libfontconfig-dev and libxkbcommon-dev on Debian and Ubuntu.

SLINT_BACKEND=winit-software slintplot-gallery    # Slint's software renderer, on the CPU
SLINT_BACKEND=winit-femtovg slintplot-gallery     # FemtoVG, the default
cargo install slintplot-gallery --features skia
SLINT_BACKEND=winit-skia slintplot-gallery        # Skia, on the GPU

The source of the apps is on GitHub, in examples/gallery and examples/stress. The gallery's ui/gallery.slint has a working example of every chart; the gallery's code view shows each one, taken from that file when the app is built, with the data filled in so it runs as it is.

A third app, examples/fuzz, tests the library rather than showing it, and runs from a clone of the repository. It feeds every chart random and malformed data (see Missing and invalid values) and stops with the round, chart and seed that reproduce a panic, a hang or a runaway allocation. Its soak test repeats the same rounds for a while and checks that memory in use levels off.

cargo run --release -p slintplot-fuzz -- 300 42     # 300 rounds from seed 42
cargo run --release -p slintplot-fuzz -- soak 60    # an hour of the same rounds

The gallery also runs in the browser, built with WebAssembly: slintplot.dev/demo.

Ready-built apps for macOS, Windows and Linux are on the releases page. Each download includes the licenses of the open-source crates it is built from.

Performance

SlintPlot draws every chart with Slint's own elements: a path per line, a rectangle per bar, a text per label. That keeps charts sharp, themeable and interactive, but every element costs drawing time, and that cost grows with the data. The stress test app, slintplot-stress, was built to find where it starts to matter: it pushes each chart type from 100 to 1,000,000 points, streams new data at 60 Hz, and shows the layout and frame times live. Use it to check what's fast enough for your app before you build it; we use it to catch slowdowns in SlintPlot before a release.

Limitations

What SlintPlot 0.5 doesn't do yet, or does with restrictions:

• Rust only. The chart geometry is computed in Rust and connected with register!, so the library can't be used from Slint's C++, JavaScript or Python APIs. For the same reason, charts aren't drawn in Slint's live preview or SlintPad.
• Platforms. Tested on desktop (macOS, Windows and Linux) and in the browser with WebAssembly, from version 0.1.2: the gallery runs in the browser. Embedded (MCU) builds are untested. With Slint's software renderer, enable its software-renderer-path feature, or charts aren't drawn.
• 14 built-in languages. ChartTheme.language covers 14 languages; for others, set the ChartLocale fields yourself. Grouping is always in thousands (no Indian lakh grouping, and four-digit numbers are grouped in every language), digits are Western, and right-to-left layout isn't supported.
• Time zones. Time axes are in UTC, with an optional fixed offset. Named time zones and daylight saving time changes aren't supported.
• Two value axes at most, and only in line, bar, scatter, bubble and time series charts: horizontal bar charts have one value axis.
• Zoom, pan and decimation work in the cartesian charts only (line, bar, scatter and time series), and in candlestick and Gantt charts along time. Zoom is off by default.
• Eight colors per theme. With more than eight datasets the colors repeat. Set your own palette for more (see Theming).
• Large charts of separate shapes are slower. Sunburst, waterfall, dumbbell and funnel charts draw every item as its own shape: about 270 ms for a sunburst with 10,000 items, and about 80–100 ms for waterfall and dumbbell charts. With up to 1,000 items, a frame takes under 30 ms. Decimation applies to lines only.
• Label fitting is estimated. Sunburst and treemap labels are kept or hidden from an estimate of the text width, so very wide or narrow fonts can be clipped or hidden too early.
• No image or PDF export. To save a chart as PNG, render the window with Slint's software renderer, as the gallery's --snapshot option does.
• Sunburst data order. A parent item must come before its children in items.
• Requirements. Slint 1.18 or later and Rust 1.88 or later.

Pricing

SlintPlot is free for open-source software under the GPLv3 and for noncommercial use (see License). A commercial license lets you use it in closed-source software you sell, ship or deliver to clients. Licenses are per developer, per year, and cover any number of your products.

Prices exclude VAT. Payments are handled by Paddle, which is the seller of record and sends the invoice. A developer is anyone who writes code that uses SlintPlot. Perpetual fallback: products you release while your license is active may keep being sold and shipped after it ends, with the SlintPlot version they were built with; new products and newer SlintPlot versions need an active license. Your application also needs a suitable Slint license. Questions: license@slintplot.dev.

License

SlintPlot is available under your choice of three licenses:

• GPLv3: free for anyone, for any purpose, under the GNU GPL, version 3. Software that includes SlintPlot and is distributed to others must be distributed under the GPLv3, with its source code.
• PolyForm Noncommercial: free for personal, hobby, research, education and other noncommercial use, with or without sharing your source code, under the PolyForm Noncommercial License 1.0.0.
• Commercial: for commercial use without the GPLv3's conditions, such as in closed-source software you sell or ship. See Pricing.

LICENSE.md and COMMERCIAL.md have the details. Your application also needs a suitable Slint license.

SlintPlot is an independent project. It is not affiliated with, endorsed by or sponsored by SixtyFPS GmbH or the Slint project. Slint and the Slint logo are trademarks of SixtyFPS GmbH.

SlintPlot · slintplot.dev · license@slintplot.dev
Not affiliated with SixtyFPS GmbH or the Slint project.