Chart

Anatomy

A lightweight inline SVG bar or line chart renderer. No JS required for static rendering; supports optional accessibility layer and custom colors. Data points are simple (label, value) tuples.

maud_ui::primitives::chart

Props

Generated from public Rust fields. Defaults are evaluated from the implementation.

Prop	Type	Default	Description
`id`	`String`	`"chart"`	Unique ID for the chart container
`chart_type`	`ChartType`	`Bar`	Bar or Line
`data`	`Vec<DataPoint>`	`[]`	Data points to plot
`title`	`Option<String>`	`None`	Optional title above the chart
`width`	`u32`	`400`	SVG width in px (default 400)
`height`	`u32`	`200`	SVG height in px (default 200)
`color`	`Option<String>`	`None`	CSS color for bars/line/dots; defaults to var(--mui-accent)
`config`	`Option<ChartConfig>`	`None`	Optional single-series configuration; the first entry supplies label and color.
`accessibility_layer`	`bool`	`false`	Expose a static accessible data list and enhanced keyboard navigation. The live point announcements are a Rust extension to the stock composition.

Examples

Bar chart

Monthly Revenue (USD)

Line chart with area fill

Active Users Over Time

Custom color

Conversion Rate by Month

Wide line chart

Pageviews Trend (6 months)

Accessibility layer (emits data-accessibility-layer)

Usage and composition

Import

use maud_ui::primitives::chart::{self, ChartType, DataPoint, ChartConfig, Props};

Example

use maud::html;
use maud_ui::primitives::chart;

html! {
    (chart::render(chart::Props {
        id: "sales-chart".into(),
        chart_type: chart::ChartType::Bar,
        data: vec![
            chart::DataPoint { label: "Jan".into(), value: 186.0 },
            chart::DataPoint { label: "Feb".into(), value: 305.0 },
            chart::DataPoint { label: "Mar".into(), value: 237.0 },
        ],
        title: Some("Monthly Revenue".into()),
        width: 400,
        height: 200,
        color: None,
        config: None,
        accessibility_layer: false,
    }))
}

Non-finite values produce a noninteractive alert rather than plotting a fabricated point. A zero width or height produces no SVG. The renderer has one series and does not expose legend, tooltip, or multiple-series APIs.

Variants / Enums

ChartType

Bar: vertical bar chart
Line: line chart with area fill gradient

Card (for chart containers), Button (for chart controls/legends)

Shadcn reference

https://ui.shadcn.com/docs/components/base/chart

Accessibility

Line and bar charts render grid lines and axis labels for reference. With accessibility_layer enabled, the data points are available as a screen-reader-accessible list even without JavaScript. With JavaScript and at least one point, the SVG is keyboard-focusable: Left/Right move among points, Home/End jump to the edges, and Enter pauses or resumes navigation. A live region announces the current point. This live data navigation is a Rust extension: the pinned reference composition does not include a Tooltip. The flag does not change the visible chart at rest. Grid lines are low-opacity for visual context; axis labels use .mui-chart__value and .mui-chart__label classes.

In the Nova profile, a Line chart highlights the active point while the pointer moves within the plot. A touch move also highlights a point and leaves the highlight visible after touch ends. With keyboard navigation enabled, focus and navigation show the corresponding highlight; the existing Home, End and pause controls remain Rust extensions. For repeated category labels, the highlight follows the first matching category as in the pinned reference. The static SVG and accessible data remain available without JavaScript.

← Back to Gallery