PhiaUi.Components.DumbbellChart (phia_ui v0.1.17)

Dumbbell chart — pure SVG, zero JS.

Shows before/after comparison with two dots connected by a bar. Horizontal orientation: categories on Y-axis, values on X-axis.

Examples

<.dumbbell_chart data={[
  %{label: "2023", start_value: 65, end_value: 85},
  %{label: "2024", start_value: 70, end_value: 92}
]} />

data (:list) - Data: [%{label, start_value, end_value}]. Defaults to [].
start_color (:string) - Fill color for start dots. Defaults to "oklch(0.65 0.20 300)".
end_color (:string) - Fill color for end dots. Defaults to "oklch(0.60 0.20 240)".
bar_color (:string) - Stroke color for connecting bar. Defaults to "oklch(0.75 0.05 0)".
dot_radius (:integer) - Radius of dot endpoints in pixels. Defaults to 5.
show_grid (:boolean) - Show X-axis grid lines. Defaults to true.
show_labels (:boolean) - Show axis tick labels. Defaults to true.
animate (:boolean) - Enable entrance animations. Defaults to true.
animation_duration (:integer) - Animation duration in ms. Defaults to 600.
theme (:map) - Chart theme overrides (see ChartTheme). Defaults to %{}.
id (:string) - Unique ID for the chart (auto-generated if not provided). Defaults to nil.
title (:string) - Chart title rendered above the visualization. Defaults to nil.
description (:string) - Chart description for context (rendered below title). Defaults to nil.
class (:string) - Defaults to nil.
Global attributes are accepted.