Skip to content

Chart

Data-driven 2-D charts (Wolfram's Data Visualization guide), rendered by one element, <notatio-chart>. type picks the chart kind — or is left off, and the chart is chosen from the data's shape (the family head Chart does the same; the named heads Histogram, BarChart, … are the members); data is JSON (a value list, a matrix, or a list of series — see each story below); labels (also JSON) and label (a title, Wolfram's PlotLabel) are optional. list and listline (ListPlot / ListLinePlot) reuse the same sampled-point renderer as Plot — a bare number list reads as index vs value.

ListPlot & ListLinePlot

ListPlot: index vs value

A bare number list plots as index (x) vs value (y).

source
<notatio-chart type="list" data="[3,1,4,1,5,9,2,6]" />

ListLinePlot: connected

source
<notatio-chart type="listline" data="[3,1,4,1,5,9,2,6]" />

BarChart

Value list with category labels

source
<notatio-chart type="bar" data="[12,19,7,15,10]" labels='["Mon","Tue","Wed","Thu","Fri"]' label="Daily commits" />

Negative values dip below the baseline

source
<notatio-chart type="bar" data="[3,-2,5,-1,4]" />

Histogram

Auto bin count (Sturges' rule)

The bin count defaults to Sturges' rule; pass bins to override.

source
<notatio-chart type="histogram" data="[1,2,2,3,3,3,4,4,4,4,5,5,5,6,6,7]" />

Explicit bin count

source
<notatio-chart type="histogram" data="[1,2,2,3,3,3,4,4,4,4,5,5,5,6,6,7]" bins="4" />

PieChart

Proportions of a value list

source
<notatio-chart type="pie" data="[35,25,20,20]" labels='["A","B","C","D"]' />

BoxWhiskerChart

One box per series

data is a list of raw value lists; each series is reduced to its five-number summary (min, Q1, median, Q3, max).

source
<notatio-chart type="box" data="[[2,4,4,4,5,5,7,9],[1,2,3,3,3,4,4,10]]" labels='["A","B"]' />

ArrayPlot

A matrix as a heatmap

Each cell's value maps to a colour ramp from blue (low) to accent (high).

source
<notatio-chart type="array" data="[[0,1,2,3],[1,2,3,4],[2,3,4,5],[3,4,5,6]]" />

DiscretePlot

A stem plot

A vertical stem from the zero baseline to each value, with a dot on top.

source
<notatio-chart type="discrete" data="[1,-2,3,4,-1,2]" />

Chosen from the data

No type: the shape decides

A short number list is bars, a long one a histogram, pairs are points, a matrix is an array plot, ragged rows are boxes — chooseChartType, which is also the rule behind the Chart head.

source
<notatio-chart data="[3,1,4,1,5]" />
<notatio-chart data="[5,3,8,1,9,2,7,4,6,3,5,8,2,9,1,4,7,3,6,5,2,8,4,1,9]" />
<notatio-chart data="[[0,1],[1,3],[2,2],[3,5]]" />
<notatio-chart data="[[1,0,2],[0,3,1],[2,1,0]]" />

Roadmap

  • Series overlays for bar / list (several value lists sharing one frame).
  • ScalingFunctions / gridlines / legends to match Plot's chrome options.
  • Hover readouts, mirroring Plot's nearest-sample tooltip.