Chapter 36

/

Data Display

Chart

Data Display

A chart drawn as vector graphics when the page is built: bars, lines, areas, a pie or a donut over a list of records.

Chart(kind: …, data: …, x: …)

Renders with the class wf-chart, stable across releases, so a stylesheet may target it.

Props of Chart
Prop Type Meaning
kind: .bar .line .area .pie .donut

What it draws
data: Any

The rows: a list of records, or of numbers
x: String

The key of each row's label
y: Any

The key of each row's value, or a list of keys for several series
colors: Any

The series' colours, in order
width: Number

Its width in user units (it scales to its box)
height: Number

Its height in user units
ink: String

The colour of its labels
grid: String

The colour of its grid lines
legend: Bool

Name the series
stacked: Bool

Stack a bar chart's series
labels: Bool

Write each bar's or slice's value on it
unit: String

A unit after each value on the axis: ms, %

Attribute families: global, aria, data. Plus the universal props on every element: animate:, exit:, speed:, class:, ref:.