elm-patternfly-charts

PatternFly v6 chart components for Elm, built on gampleman/elm-visualization.

Live gallery: https://lenards.github.io/elm-patternfly-charts/

Chart types

PF6.Charts.Area — filled line chart for continuous metrics
PF6.Charts.Bar — grouped or single-series vertical bars
PF6.Charts.BoxPlot — statistical distribution per category
PF6.Charts.Bullet — measure vs. qualitative range + target marker
PF6.Charts.Donut — ring chart with center metric label
PF6.Charts.DonutUtilization — single-metric with warning/danger thresholds
PF6.Charts.Line — multi-series continuous data
PF6.Charts.Pie — solid slices for part-to-whole
PF6.Charts.Scatter — multi-series 2D point cloud
PF6.Charts.Sparkline — miniature inline trend line
PF6.Charts.Stack — stacked area chart for cumulative series
PF6.Charts.Threshold — line chart with warning/danger threshold lines
PF6.Charts.Skeleton — loading state placeholders for every chart type

Quick start

import PF6.Charts.Area as Area

view : Html msg
view =
    Area.fromData
        [ ( 0, 42 ), ( 1, 55 ), ( 2, 48 ), ( 3, 72 ), ( 4, 63 ) ]
        |> Area.withWidth 500
        |> Area.withXLabel "Time (min)"
        |> Area.withYLabel "CPU %"
        |> Area.withTitle "CPU Utilization"
        |> Area.withTooltips True
        |> Area.toSvg

All charts follow the same builder pattern: fromData |> withX |> toSvg.

Features

PF6 color tokens — PF6.Charts.Colors exposes the full PatternFly v6 color scale
Light / dark themes — PF6.Charts.Theme with Theme.light and Theme.dark
Custom themes — Theme.fromUiThemeColors accepts a plain record of hex strings, no dependency on any UI library
Loading skeletons — every chart has withLoading : Bool that swaps in a shimmer placeholder while data is fetching
SVG tooltips — withTooltips True on Area, Bar, Donut, Pie, and Scatter adds browser-native <title> hover text, zero state required
Responsive — all charts accept withWidth/withHeight; pair with a ResizeObserver port in your app (see the gallery's "Resize Observer" panel)

Bridging from an existing theme

If your app already uses a UI theme library you can extract its colors into a plain record and pass it to Theme.fromUiThemeColors without adding a dependency on that library here:

import PF6.Charts.Theme as ChartTheme

-- Convert your UI theme colors to hex strings however your library supports,
-- then build a ChartTheme:
myChartTheme : ChartTheme.Theme
myChartTheme =
    ChartTheme.fromUiThemeColors
        { primary      = "#0066cc"
        , labelText    = "#151515"
        , background   = "#ffffff"
        , borderDefault = "#d2d2d2"
        }

Running the gallery locally

cd demo
elm make src/Main.elm --output main.js
# then open index.html in a browser, or:
npx serve .

Repository layout

elm-patternfly-charts/
├── src/PF6/Charts/   ← library source
├── demo/             ← gallery application
│   ├── src/Main.elm
│   └── index.html
└── docs/             ← GitHub Pages output (compiled demo)
    ├── index.html
    └── main.js

To rebuild docs/main.js after changes:

cd demo
elm make src/Main.elm --optimize --output ../docs/main.js

lenards/elm-patternfly-charts/1.0.1