PF6.Charts.Pie

Pie chart — full circular slices for part-to-whole relationships.

Similar to Donut but with no hollow center. Use Donut when you need to display a summary metric in the center.

Types

type PieChart

An opaque pie chart configuration.

type alias Slice =

{ label : String

, value : Float

}

A single slice in a pie chart, identified by a label and a numeric value.

{ label = "US East", value = 35 }

Constructor

fromData : List Slice -> PieChart

Create a pie chart from a list of slices.

chart =
    Pie.fromData
        [ { label = "Running", value = 42 }
        , { label = "Stopped", value = 8 }
        , { label = "Pending", value = 5 }
        ]

Modifiers

withSize : Int -> PieChart -> PieChart

Set the overall SVG size (width = height). Default: 230.

withTheme : Theme -> PieChart -> PieChart

Apply a Theme.

withColors : List String -> PieChart -> PieChart

Override the slice color list.

withTitle : String -> PieChart -> PieChart

Set the chart title rendered below the pie.

withLoading : Bool -> PieChart -> PieChart

Show a skeleton placeholder instead of the chart while data is loading.

withTooltips : Bool -> PieChart -> PieChart

Enable SVG <title> tooltips on each slice. Default: False.

When enabled, hovering over a slice shows a browser-native tooltip with the label, value, and percentage (e.g. "Running: 42 (76%)"). No ports required.

Renderer

toSvg : PieChart -> Html msg

Render to Html msg.

lenards/elm-patternfly-charts/1.0.1

PF6.Charts.Pie

Types

Constructor

Modifiers

Renderer

Modules

PF6.Charts