Charts

Show comparisons, trends, distributions, and relationships with day-piece-charts. A chart combines marks such as bars or points with data values, scales, axes, and a coordinate system. The resulting canvas drawing uses the same layout logic across toolkits.

Add to your app

Add day-piece-charts to your app’s Cargo dependencies:

[dependencies]
day-piece-charts = "0.4.2"

Crate · API reference · Source. There are no chart-specific toolkit features or Day.toml entries. Give the chart a size or place it in a container that allocates space. The mock toolkit can check logic but draws no UI.

Build a chart

This component plots caller-supplied category names and values. App-authored labels use the following messages in an app with generated resources:

chart_category = Category
chart_amount = Amount

use day::prelude::*;
use day_piece_charts::{bar, chart, value};

pub fn totals_chart(rows: Signal<Vec<(String, f64)>>) -> impl Piece {
    chart(move || {
        let category = res::str::chart_category().format();
        let amount = res::str::chart_amount().format();
        rows.get().into_iter().map(|(name, total)| {
            bar(value(category.clone(), name), value(amount.clone(), total))
        }).collect()
    })
    .y_label(res::str::chart_amount())
    .frame(480.0, 280.0)
}

chart() reruns its marks closure when a signal read by that closure changes. Resizing also recomputes layout. value() associates a channel label with a numeric or categorical value. Use time() for timestamps in seconds since the Unix epoch. Axis numbers and date labels follow the locale.

Marks, scales, and grouping

Need	Building blocks
Compare categories	`bar()` with categorical and numeric values.
Show a trend or range	`line()`, `area()`, or a mark’s range modifiers.
Show a distribution or relationship	`point()` and `rect()`.
Compare series	`Mark::by_series()` for color/series identity; `by_position()` for side-by-side positioning.
Show proportions	`sector()` or stacked marks in polar coordinates.
Change a numeric scale	`ScaleKind`, including linear, log, power, and time scales.

Keep category ordering stable when comparing updates. Non-finite values are omitted; validate input before treating a missing mark as zero. Use explicit domains when charts need comparable scales. Logarithmic scales require suitable positive values.

The Chart builder controls axis labels, tick configuration, legends, colors, annotations, and coordinates. Use LegendPosition to place the legend. App-authored series names and annotations belong in the translation catalog.

Interaction and accessibility

Inspect connects pointer or touch inspection to a selection signal. Configure nearest-x or nearest-mark selection with Snap and choose guide lines with Guides. Attach an interaction with interact(). Read the resulting selection to show details in ordinary Day controls.

A canvas chart is not automatically an accessible data table. Give the chart an appropriate accessibility label, provide a textual summary or table, and use labels or shapes as well as color to distinguish important values. Keep important tasks available without precise pointer selection.

Export

ChartExports collects recorded chart drawings for export. File destinations and permission handling remain app concerns; see file dialogs.

Charts use the selected toolkit’s canvas, font, and image facilities. Text metrics and input behavior can differ between platforms. Test dense labels, resizing, and touch targets in the platforms your app supports. See canvas, fonts, and colors.

Examples

Embed the chart examples as a playground, or select individual pages for a data-visualization demo. day-piece-charts-gallery supplies the pages used by the chart demo, including a chart construction walkthrough, mark combinations, and interactive examples.

Add the example library

[dependencies]
day-piece-charts-gallery = "0.1"

Crate · API reference · Source. Build with the Day CLI so the library’s resources are included.

Show the gallery

The selected-page signal belongs to your app. Changing it selects another example:

use day::prelude::*;
use day_piece_charts_gallery::{ChartPage, gallery};

pub fn chart_examples() -> impl Piece {
    gallery(Signal::new(ChartPage::Scatter))
}

gallery() provides a picker and the selected page. For custom navigation, use pages() and the returned Entry values, or request one page() by its ChartPage. The library’s localized titles follow the host locale. Keep the app’s surrounding navigation and commands localized too.

The example pages include export controls. Apps supplying a menu can use export_menu_items() with the current page. Saving still depends on the platform’s file-dialog and export support.

Scope and platform behavior

These are sample pages with their own data and UI; they are not a chart editor or a data-import API. The same canvas and font limitations apply to both libraries. The mock toolkit does not render a visible gallery.

Explore the browser demo or compose your own navigation using navigation. For another reusable visual playground, see Lottie examples.