Charts

wdoc ships three chart kinds — bar_chart, line_chart, and pie_chart — that lower to SVG via pure-WCL geometry. Each is an SvgBlock, so place it inside a diagram sharing its size. Data is supplied as a list of records; the variant is inferred from each record's shape, so a bare { … } is all you need.

Bar chart

Both take a series: list<ChartSeries> — each series is a { name, values } record. Multiple series produce grouped bars or multi-line plots; categories labels the x-axis. (You can still write the explicit ChartSeries::Of { … } form to disambiguate.)

diagram { width = 360  height = 200
  bar_chart { width = 360.0  height = 200.0
    title = "Revenue"  x_label = "Quarter"  y_label = "$k"
    categories = ["Q1", "Q2", "Q3", "Q4"]
    series = [
      { name: "2025", values: [42.0, 55.0, 61.0, 78.0] },
      { name: "2026", values: [30.0, 48.0, 52.0, 66.0] },
    ]
  }
}

bar_chart and line_chart share most fields; line_chart adds point_labels and points. The line_chart fields (the superset) are listed below — bar_chart is identical minus those two.

Line chart annotations

On a line_chart, set point_labels = true to print every data point's value above its marker. For author-named callouts, pass points: list<ChartPoint> — each a { label, category, value } record where category is the 0-based x slot and value is the y in data units.

diagram { width = 360  height = 200
  line_chart { width = 360.0  height = 200.0
    title = "Latency (ms)"  x_label = "Day"
    categories = ["Mon", "Tue", "Wed", "Thu", "Fri"]
    point_labels = true
    series = [ { name: "p50", values: [12.0, 14.0, 11.0, 18.0, 13.0] } ]
    points = [ { label: "spike", category: 3, value: 18.0 } ]
  }
}

Pie chart

A pie_chart takes slices: list<ChartSlice> — each a { label, value } record. Slices are drawn as polygon-approximated arcs.

diagram { width = 240  height = 240
  pie_chart { width = 240.0  height = 240.0
    title = "Market share"
    slices = [
      { label: "Alpha", value: 42.0 },
      { label: "Beta",  value: 31.0 },
      { label: "Other", value: 27.0 },
    ]
  }
}