An opaque area chart configuration.

A named series of (x, y) data points for a multi-series area chart.

Create a single-series area chart from a list of (x, y) pairs.

The x-axis is treated as a continuous numeric scale (use index 0, 1, 2... for evenly-spaced time steps, or real timestamps as epoch seconds).

chart =
    Area.fromData
        [ ( 0, 42 ), ( 1, 55 ), ( 2, 48 ), ( 3, 72 ), ( 4, 63 ) ]

Create a multi-series area chart from named series.

Each series is drawn with a distinct color from the theme's multi-ordered scale. Series are drawn back-to-front so later series appear on top.

chart =
    Area.fromSeries
        [ { label = "Cats", data = catData }
        , { label = "Dogs", data = dogData }
        ]

Set chart width in pixels. Default: 500.

Set chart height in pixels. Default: 250.

Override the color for a single-series chart with a hex string. Default: PF6 primary blue.

Has no effect on multi-series charts (use withTheme to customise series colors).

Apply a Theme, setting axis, grid, label, and series colors.

Set the fill opacity under each area line. Default: 0.20.

Set the x-axis label.

Set the y-axis label.

Set the chart title rendered above the chart.

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

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

When enabled, hovering over a data point shows a browser-native tooltip with the x and y values (e.g. "x: 3, y: 72"). No ports or state required.

Render the chart to an Html msg node.