bar_chart / line_chart / pie_chart

block

Three chart kinds that lower to SVG via pure-WCL geometry; place each inside a diagram sharing its size.

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 a list of records and the variant is inferred from each record's shape, so a bare { … } is all you need.

Bar and line charts

Both take a series: list<ChartSeries> — each series a { name, values } record; multiple series produce grouped bars or multi-line plots, and categories labels the x-axis. line_chart adds point_labels = true (print every point's value) and points (author-named callouts, each { label, category, value }).

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] },
    ]
  }
}

Pie chart

A pie_chart takes slices: list<ChartSlice> — each a { label, value } record, 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 },
    ]
  }
}

Charts cycle the wdoc-series-1..wdoc-series-8 palette classes, so a class override or a site theme recolours them. See styling.

Examples

A grouped bar chart

A bar_chart is an SvgBlock, so it sits inside a diagram of the same size. Each series is a { name, values } record; multiple series produce grouped bars.

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] },
    ]
  }
}

Expected: A grouped bar chart with two series across four quarters, axis labels, and a title.

- diagram

- timeline