XY chart

The .xychart function allows plotting 2D line/bar charts in a pure, flexible Quarkdown fashion, through the power of Mermaid.

All its parameters, except for values, are optional.

Parameter	Description	Accepts
lines	Whether to draw lines (defaults to true).	Boolean
bars	Whether to draw bars (defaults to false).	Boolean
x	Label for the X axis.	String
xrange	Numerical range for the X axis. Can be open-ended. Incompatible with xtags.	Range
xtags	Categorical tags for the X axis. Incompatible with xrange.	Iterable
y	Label for the Y axis.	String
yrange	Range for the Y axis. Can be open-ended.	Range
caption	Caption. If present, the chart is numbered as a figure.	String
values	Y values to plot.	Iterable of points (single line) Iterable of iterables of points (multiple lines)

Axis ranges

xrange and yrange define the boundaries of the visible area of the chart, through the usual x..y Range syntax.

The range may also be open on either end, or both.

• If open on the left end, the range starts from the minimum value among the plotted points.
• If open on the right end, the range ends at the maximum value among the plotted points.

For instance, .. (infinite) is the default range, which shows the area between the minimum and maximum values.

 

Possible input sources

From static list

values can be represented by a Markdown list, just like all iterables.

.xychart bars:{yes} x:{Months} y:{Revenue} yrange:{100..}
  - 250
  - 500
  - 350
  - 450
  - 400
  - 500
  - 600

 

In case of nested lists (iterable of iterables), multiple lines will be plotted:

.xychart x:{Months} y:{Revenue}
  - - 250
    - 500
    - 350
    - 450
    - 400

  - - 400
    - 150
    - 200
    - 400
    - 450

 

From CSV/table

Table manipulation functions such as .tablecolumn can extract values from the columns of a table as iterables.

.xychart
    .tablecolumn {2}
        .csv {data.csv}

In case multiple columns must be accessed from the same table, consider calling .tablecolumns, which returns a collection of columns, for efficiency. Any Iterable operation can then be performed.

In the following example, the chart displays two lines: one for the second and one for the third column of the CSV. Additionally, the first column of the table is used as a set of categorical tags for the X axis.

.var {columns}
    .tablecolumns
        .csv {data.csv}

.xychart xtags:{.columns::first} x:{Years} y:{Sales}
    .columns::second
    .columns::third

 

From iterations

Quarkdown loops return an iterable containing the result of each iteration, making them a suitable input for values, especially in combination with math functions.

.xychart
    .repeat {100}
        .1::pow {2}::divide {100}
    
    .repeat {100}
        .1::logn::multiply {10}