An opaque bar chart configuration.

Multi-series data: each series has a label and a value per category.

Bar orientation — vertical (default) or horizontal.

Use Horizontal when category labels are long or when you want to show nominal data with more space for labeling (categories on the y-axis).

Create a bar chart from category labels and one or more value series.

For a single series, pass a list with one SeriesData.

chart =
    Bar.fromData
        [ "Memory", "CPU", "Disk" ]
        [ { label = "Used", values = [ 70, 45, 82 ] } ]

For grouped bars:

chart =
    Bar.fromData
        [ "Node 1", "Node 2", "Node 3" ]
        [ { label = "Used (GiB)", values = [ 8, 12, 6 ] }
        , { label = "Cached (GiB)", values = [ 3, 4, 2 ] }
        ]

Set chart width in pixels. Default: 500.

Set chart height in pixels. Default: 300.

Apply a Theme.

Override the color list for bars (one color per series).

Set the x-axis label.

Set the y-axis label.

Set the chart title.

When True (default), multiple series render as side-by-side grouped bars. When False, series are stacked (use Stack for stacked area).

Set the bar orientation. Default: Vertical (categories on x-axis).

Use Horizontal when category labels are long or for nominal variables — bars extend left-to-right, categories are listed on the y-axis.

Bar.fromData categories series
    |> Bar.withOrientation Bar.Horizontal
    |> Bar.toSvg

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

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

When enabled, hovering over a bar shows a browser-native tooltip with the category and value (e.g. "Memory · Used: 70"). No ports or state required.

Render to Html msg.