Lollipop chart — pure SVG, zero JS.
Thin stems with dot endpoints, a lightweight alternative to bar charts. Supports vertical and horizontal orientations.
Examples
<.lollipop_chart data={[
%{label: "A", value: 120},
%{label: "B", value: 80},
%{label: "C", value: 150}
]} />
Summary
Functions
Attributes
data(:list) - Single-series shorthand:[%{label, value}]. Defaults to[].series(:list) - Multi-series:[%{name, data: [%{label, value}]}]. Overrides:datawhen present. Defaults to[].variant(:atom) - Chart orientation. Defaults to:vertical. Must be one of:vertical, or:horizontal.colors(:list) - Override default palette. CSS color strings. Defaults to[].dot_radius(:integer) - Radius of dot endpoints in pixels. Defaults to5.stem_width(:integer) - Width of stem lines in pixels. Defaults to2.show_grid(:boolean) - Show grid lines. Defaults totrue.show_labels(:boolean) - Show axis tick labels. Defaults totrue.animate(:boolean) - Enable entrance animations. Defaults totrue.animation_duration(:integer) - Animation duration in ms. Defaults to600.theme(:map) - Chart theme overrides (see ChartTheme). Defaults to%{}.id(:string) - Unique ID for the chart (auto-generated if not provided). Defaults tonil.title(:string) - Chart title rendered above the visualization. Defaults tonil.description(:string) - Chart description for context (rendered below title). Defaults tonil.class(:string) - Defaults tonil.- Global attributes are accepted.