Pareto chart — pure SVG, zero JS.
Combines descending bars with a cumulative percentage line. Shows the 80/20 principle visually with an optional threshold line.
Examples
<.pareto_chart data={[
%{label: "Bug A", value: 45},
%{label: "Bug B", value: 30},
%{label: "Bug C", value: 15},
%{label: "Bug D", value: 10}
]} />
Summary
Functions
Attributes
data(:list) - Data:[%{label, value}]— auto-sorted descending. Defaults to[].colors(:list) - Override default palette. CSS color strings. Defaults to[].bar_color(:string) - Fill color for bars. Defaults to"oklch(0.60 0.20 240)".line_color(:string) - Stroke color for cumulative line. Defaults to"oklch(0.60 0.25 0)".show_threshold(:boolean) - Show 80% threshold line. Defaults totrue.threshold_pct(:float) - Threshold percentage value. Defaults to80.0.show_grid(:boolean) - Show Y-axis 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.border_radius(:integer) - Corner radius for bars in pixels. Defaults to2.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.