ChartStyling
Utility object for chart styling and component creation. Provides reusable styled lines, points, and axes for Vico charts.
Design principles (per design#53):
Default to thin lines without point markers to avoid clutter on dense timeseries.
Show a single dot only at the marker/cursor position (handled by rememberMarker).
Use
Interpolator.cubic()for smooth monotone curves that won't overshoot between sparse points.Reserve bold lines for the single most-important series; use subtle/gradient fills for secondary data.
Functions
Creates a bold line suitable for highlighting the primary metric in a multi-series chart.
Creates a DefaultCartesianMarker.ValueFormatter that colors the text to match the series color.
Creates a dashed secondary line. Useful for distinguishing two metrics that share the same axis without relying on colour alone.
Creates a line with a gradient area fill effect. Ideal for emphasising a single series or showing magnitude. The gradient goes from the line color at ~30% opacity to near-transparent.
Creates a clean timeseries line — thin, smooth, with no point markers. This is the default style recommended by Oscar's UX guidance: "thin lines, and maybe a dot where the cursor is."
Creates a subtle line suitable for secondary metrics that should not dominate the chart.
Gets Material 3 theme-aware colors with opacity. Useful for creating color variants while respecting the current theme.
Creates and remembers a com.patrykandpatrick.vico.compose.common.component.TextComponent styled for axis labels.
Creates and remembers a default CartesianMarker styled for the Meshtastic theme.
Creates a HorizontalLine decoration for a reference threshold (e.g. battery low, pressure normal).