Template:Graph:Chart/doc

This is a documentation subpage for Template:Graph:Chart.
It may contain usage information, categories and other content that is not part of the original template page.

This template is used on approximately 4,600 pages and changes may be widely noticed. Test changes in the template's /sandbox or /testcases subpages, or in your own user subpage. Consider discussing changes on the talk page before implementing them.

Shortcut

{{Graph}}

This template uses Lua:

Module:Graph (sandbox)

CSV2Chart

If you have data from a spreadsheet document (e.g. LibreOffice Calc) or in a statistics software R/R-Studio, you can export them to CSV file. The CSV file can be loaded with an v:en:AppLSAC, that is able to convert the CSV in chart for the data. The column should have headers in the first row. The column of the CSV file contain float or integer values. CSV2WikiChart was created as support tool for Wikipedia and for Wikiversity learning resources that contain data. Due to temporary disable graphs an added feature of CSV2WikiChart allows SVG export of charts.

Parameters

width: width of the chart
height: height of the chart
type: type of the chart: line for line charts, area for area charts, and rect for (column) bar charts, and pie for pie charts. Multiple series can stacked using the stacked prefix, e.g. stackedarea.
interpolate: interpolation method for line and area charts. It is recommended to use monotone for a monotone cubic interpolation – further supported values are listed at https://github.com/nyurik/vega/wiki/Marks#line.
colors: color palette of the chart as a comma-separated list of colors. The color values must be given either as #rgb/#rrggbb/#aarrggbb or by a CSS color name. For #aarrggbb the aa component denotes the alpha channel, i.e. FF=100% opacity, 80=50% opacity/transparency, etc. (The default color palette if n <= 10 is Category10: else is Category20: ). See Template:ChartColors for details.
xAxisTitle and yAxisTitle: captions of the x and y axes
xAxisMin, xAxisMax, yAxisMin, and yAxisMax: minimum and maximum values of the x and y axes (not yet supported for bar charts). These parameters can be used to invert the scale of a numeric axis by setting the lowest value to the Max and highest value to the Min.
xAxisFormat and yAxisFormat: changes the formatting of the axis labels. Supported values are listed at https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers for numbers. For example, the format % can be used to output percentages. For date/time specification of supported values is https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md , e.g. xAxisFormat=%d-%m-%Y for result 13-01-1977.
xAxisAngle: rotates the x axis labels by the specified angle. Recommended values are: -45, +45, -90, +90
xType and yType: data types of the values, e.g. integer for integers, number for real numbers, date for dates (e.g. YYYY-MM-DD), and string for ordinal values (use string to prevent axis values from being repeated when there are only a few values). Remarks: Date type doesn't work for bar graphs. For date data input please use ISO date format (e.g. YYYY-MM-DD) acc. to date and time formats used in HTML. Other date formats may work but not in all browsers. Date is unfortunately displayed only in en-US format for all Wikipedia languages. Workaround is to use xAxisFormat and yAxisFormat with numerical dates format.
xScaleType and yScaleType: scale types of the x and y axes, e.g. linear for linear scale (default), log for logarithmic scale and sqrt for square root scale.
A logarithmic chart allows only positive values to be plotted. A square root scale chart cannot show negative values.
x: the x-values as a comma-separated list, for dates and time see remark in xType and yType
y or y1, y2, …: the y-values for one or several data series, respectively. For pie charts y2 denotes the radius of the corresponding sectors. For dates and time see remark in xType and yType
legend: show legend (only works in case of multiple data series)
y1Title, y2Title, …: defines the label of the respective data series in the legend
linewidth: line width for line charts or distance between the pie segments for pie charts. Setting to 0 with type=line creates a scatter plot.
linewidths: different line widths may be defined for each series of data with csv, if set to 0 with "showSymbols" results with points graph, eg.: linewidths=1, 0, 5, 0.2
showSymbols: show symbol on data point for line graphs, if a number is provided, the symbol size (default 2.5) may be defined for each data series, eg.: showSymbols=1, 2, 3, 4
symbolsShape: custom shape for symbol: circle, x, square, cross, diamond, triangle_up, triangle_down, triangle_right, triangle_left. May be defined for each series of data with csv, eg.: symbolsShape= circle, cross, square
symbolsNoFill: if true symbol will be without fill (only stroke),
symbolsStroke: if "x" symbol is used or option "symbolsNoFill" symbol stroke width, default 2.5
showValues: Additionally, output the y values as text. (Currently, only (non-stacked) bar and pie charts are supported.) The output can be configured used the following parameters provided as name1:value1, name2:value2 (e.g. |showValues=fontcolor:blue,angle:0).
- format: Format the output according to https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers for numbers and https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md for date/time.
- fontcolor: text color
- fontsize: text size
- offset: move text by the given offset. For bar charts and pie charts with midangle this also defines if the text is inside or outside the chart.
- angle (pie charts only): text angle in degrees or midangle (default) for dynamic angles based on the mid-angle of the pie sector.
innerRadius: For pie charts: defines the inner radius to create a doughnut chart.
xGrid and yGrid: display grid lines on the x and y axes.
Annotations
- vAnnotatonsLine and hAnnotatonsLine: display vertical or horizontal annotation lines on specific values e.g. hAnnotatonsLine=4, 5, 6
- vAnnotatonsLabel and hAnnotatonsLabel: display vertical or horizontal annotation labels for lines e.g. hAnnotatonsLabel = label1, label2, label3

Note: In the editor preview the graph extension creates a canvas element with vector graphics. However, when saving the page a PNG raster graphics is generated instead.

Examples

Basic examples

Line Chart: <syntaxhighlight lang="wikitext"> <graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"line","properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"from":{"data":"chart"}}],"height":150,"axes":[{"type":"x","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y","x":1},{"y":12,"series":"y","x":2},{"y":6,"series":"y","x":3},{"y":14,"series":"y","x":4},{"y":2,"series":"y","x":5},{"y":10,"series":"y","x":6},{"y":7,"series":"y","x":7},{"y":9,"series":"y","x":8},{"y":12,"series":"y","x":9}]}],"width":450}</graph> </syntaxhighlight> <graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"line","properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"from":{"data":"chart"}}],"height":150,"axes":[{"type":"x","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y","x":1},{"y":12,"series":"y","x":2},{"y":6,"series":"y","x":3},{"y":14,"series":"y","x":4},{"y":2,"series":"y","x":5},{"y":10,"series":"y","x":6},{"y":7,"series":"y","x":7},{"y":9,"series":"y","x":8},{"y":12,"series":"y","x":9}]}],"width":400}</graph>

Note: The y-axis starts from the smallest y value, though this can be overridden with the yAxisMin parameter.

Area chart: <syntaxhighlight lang="wikitext"> <graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"area","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","value":0},"fill":{"scale":"color","field":"series"}}},"from":{"data":"chart"}}],"height":100,"axes":[{"type":"x","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y","x":1},{"y":12,"series":"y","x":2},{"y":6,"series":"y","x":3},{"y":14,"series":"y","x":4},{"y":2,"series":"y","x":5},{"y":10,"series":"y","x":6},{"y":7,"series":"y","x":7},{"y":9,"series":"y","x":8}]}],"width":400}</graph> </syntaxhighlight> <graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"area","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","value":0},"fill":{"scale":"color","field":"series"}}},"from":{"data":"chart"}}],"height":100,"axes":[{"type":"x","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y","x":1},{"y":12,"series":"y","x":2},{"y":6,"series":"y","x":3},{"y":14,"series":"y","x":4},{"y":2,"series":"y","x":5},{"y":10,"series":"y","x":6},{"y":7,"series":"y","x":7},{"y":9,"series":"y","x":8}]}],"width":400}</graph> Note: The y-axis starts from zero

Bar chart: <syntaxhighlight lang="wikitext"> <graph>{"legends":[],"scales":[{"type":"ordinal","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"padding":0.2,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"rect","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","value":0},"width":{"scale":"x","offset":-1,"band":true},"fill":{"scale":"color","field":"series"}}},"from":{"data":"chart"}}],"height":100,"axes":[{"type":"x","title":"The X axis","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"The Y axis","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y","x":1},{"y":12,"series":"y","x":2},{"y":6,"series":"y","x":3},{"y":14,"series":"y","x":4},{"y":2,"series":"y","x":5},{"y":10,"series":"y","x":6},{"y":7,"series":"y","x":7},{"y":9,"series":"y","x":8}]}],"width":400}</graph> </syntaxhighlight> <graph>{"legends":[],"scales":[{"type":"ordinal","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"padding":0.2,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"rect","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","value":0},"width":{"scale":"x","offset":-1,"band":true},"fill":{"scale":"color","field":"series"}}},"from":{"data":"chart"}}],"height":100,"axes":[{"type":"x","title":"The X axis","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"The Y axis","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y","x":1},{"y":12,"series":"y","x":2},{"y":6,"series":"y","x":3},{"y":14,"series":"y","x":4},{"y":2,"series":"y","x":5},{"y":10,"series":"y","x":6},{"y":7,"series":"y","x":7},{"y":9,"series":"y","x":8}]}],"width":400}</graph>

Multiple data series

Line chart with more than one data series, using colors: <syntaxhighlight lang="wikitext"> <graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Legend","fill":"color"}],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["#0000aa","#ff8000"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"type":"line"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}}],"height":150,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":true},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":true}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"Y1 Series","x":1},{"y":12,"series":"Y1 Series","x":2},{"y":6,"series":"Y1 Series","x":3},{"y":14,"series":"Y1 Series","x":4},{"y":2,"series":"Y1 Series","x":5},{"y":10,"series":"Y1 Series","x":6},{"y":7,"series":"Y1 Series","x":7},{"y":9,"series":"Y1 Series","x":8},{"y":2,"series":"Y2 Series","x":1},{"y":4,"series":"Y2 Series","x":2},{"y":6,"series":"Y2 Series","x":3},{"y":8,"series":"Y2 Series","x":4},{"y":13,"series":"Y2 Series","x":5},{"y":11,"series":"Y2 Series","x":6},{"y":9,"series":"Y2 Series","x":7},{"y":2,"series":"Y2 Series","x":8}]}],"width":400}</graph> </syntaxhighlight><graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Legend","fill":"color"}],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["#0000aa","#ff8000"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"type":"line"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}}],"height":150,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":true},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":true}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"Y1 Series","x":1},{"y":12,"series":"Y1 Series","x":2},{"y":6,"series":"Y1 Series","x":3},{"y":14,"series":"Y1 Series","x":4},{"y":2,"series":"Y1 Series","x":5},{"y":10,"series":"Y1 Series","x":6},{"y":7,"series":"Y1 Series","x":7},{"y":9,"series":"Y1 Series","x":8},{"y":2,"series":"Y2 Series","x":1},{"y":4,"series":"Y2 Series","x":2},{"y":6,"series":"Y2 Series","x":3},{"y":8,"series":"Y2 Series","x":4},{"y":13,"series":"Y2 Series","x":5},{"y":11,"series":"Y2 Series","x":6},{"y":9,"series":"Y2 Series","x":7},{"y":2,"series":"Y2 Series","x":8}]}],"width":400}</graph>

Area chart with more than one data series showing blended overlap: <syntaxhighlight lang="wikitext"> <graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Legend","fill":"color"}],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["#0000aa","#ff8000"]},{"type":"ordinal","name":"transparency","range":["0.50196078431373","0.50196078431373"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"fill":{"value":"red"}},"update":{"fillOpacity":{"scale":"transparency","field":"series"},"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","value":0},"fill":{"scale":"color","field":"series"}}},"type":"area"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}}],"height":100,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y1","x":1},{"y":12,"series":"y1","x":2},{"y":6,"series":"y1","x":3},{"y":14,"series":"y1","x":4},{"y":2,"series":"y1","x":5},{"y":10,"series":"y1","x":6},{"y":7,"series":"y1","x":7},{"y":9,"series":"y1","x":8},{"y":2,"series":"y2","x":1},{"y":4,"series":"y2","x":2},{"y":6,"series":"y2","x":3},{"y":8,"series":"y2","x":4},{"y":13,"series":"y2","x":5},{"y":11,"series":"y2","x":6},{"y":9,"series":"y2","x":7},{"y":2,"series":"y2","x":8}]}],"width":400}</graph> </syntaxhighlight><graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Legend","fill":"color"}],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["#0000aa","#ff8000"]},{"type":"ordinal","name":"transparency","range":["0.50196078431373","0.50196078431373"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"fill":{"value":"red"}},"update":{"fillOpacity":{"scale":"transparency","field":"series"},"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","value":0},"fill":{"scale":"color","field":"series"}}},"type":"area"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}}],"height":100,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y1","x":1},{"y":12,"series":"y1","x":2},{"y":6,"series":"y1","x":3},{"y":14,"series":"y1","x":4},{"y":2,"series":"y1","x":5},{"y":10,"series":"y1","x":6},{"y":7,"series":"y1","x":7},{"y":9,"series":"y1","x":8},{"y":2,"series":"y2","x":1},{"y":4,"series":"y2","x":2},{"y":6,"series":"y2","x":3},{"y":8,"series":"y2","x":4},{"y":13,"series":"y2","x":5},{"y":11,"series":"y2","x":6},{"y":9,"series":"y2","x":7},{"y":2,"series":"y2","x":8}]}],"width":400}</graph>

Bar chart with multiple data series: <syntaxhighlight lang="wikitext"> <graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Legend","fill":"color"}],"scales":[{"type":"ordinal","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"padding":0.2,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["#0000aa","#ff8000"]},{"type":"ordinal","name":"transparency","range":["0.50196078431373","0.50196078431373"]}],"version":2,"marks":[{"type":"group","from":{"data":"chart","transform":[{"groupby":"x","type":"facet"}]},"properties":{"enter":{"width":{"scale":"x","band":true},"x":{"scale":"x","field":"key"}}},"marks":[{"properties":{"hover":{"fill":{"value":"red"}},"update":{"fillOpacity":{"scale":"transparency","field":"series"},"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"series","field":"series"},"y2":{"scale":"y","value":0},"width":{"scale":"series","offset":-1,"band":true},"fill":{"scale":"color","field":"series"}}},"type":"rect"}],"scales":[{"domain":{"field":"series"},"type":"ordinal","name":"series","range":"width"}]}],"height":100,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y1","x":1},{"y":12,"series":"y1","x":2},{"y":6,"series":"y1","x":3},{"y":14,"series":"y1","x":4},{"y":2,"series":"y1","x":5},{"y":10,"series":"y1","x":6},{"y":7,"series":"y1","x":7},{"y":9,"series":"y1","x":8},{"y":2,"series":"y2","x":1},{"y":4,"series":"y2","x":2},{"y":6,"series":"y2","x":3},{"y":8,"series":"y2","x":4},{"y":13,"series":"y2","x":5},{"y":11,"series":"y2","x":6},{"y":9,"series":"y2","x":7},{"y":2,"series":"y2","x":8}]}],"width":400}</graph> </syntaxhighlight> <graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Legend","fill":"color"}],"scales":[{"type":"ordinal","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"padding":0.2,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["#0000aa","#ff8000"]},{"type":"ordinal","name":"transparency","range":["0.50196078431373","0.50196078431373"]}],"version":2,"marks":[{"type":"group","from":{"data":"chart","transform":[{"groupby":"x","type":"facet"}]},"properties":{"enter":{"width":{"scale":"x","band":true},"x":{"scale":"x","field":"key"}}},"marks":[{"properties":{"hover":{"fill":{"value":"red"}},"update":{"fillOpacity":{"scale":"transparency","field":"series"},"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"series","field":"series"},"y2":{"scale":"y","value":0},"width":{"scale":"series","offset":-1,"band":true},"fill":{"scale":"color","field":"series"}}},"type":"rect"}],"scales":[{"domain":{"field":"series"},"type":"ordinal","name":"series","range":"width"}]}],"height":100,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y1","x":1},{"y":12,"series":"y1","x":2},{"y":6,"series":"y1","x":3},{"y":14,"series":"y1","x":4},{"y":2,"series":"y1","x":5},{"y":10,"series":"y1","x":6},{"y":7,"series":"y1","x":7},{"y":9,"series":"y1","x":8},{"y":2,"series":"y2","x":1},{"y":4,"series":"y2","x":2},{"y":6,"series":"y2","x":3},{"y":8,"series":"y2","x":4},{"y":13,"series":"y2","x":5},{"y":11,"series":"y2","x":6},{"y":9,"series":"y2","x":7},{"y":2,"series":"y2","x":8}]}],"width":400}</graph>

Area chart with smoothed data values: <syntaxhighlight lang="wikitext"> <graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Legend","fill":"color"}],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"stats","field":"sum_y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["seagreen","orchid"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"layout_start"},"interpolate":{"value":"monotone"},"y2":{"scale":"y","field":"layout_end"},"x":{"scale":"x","field":"x"},"fill":{"scale":"color","field":"series"}}},"type":"area"}],"from":{"data":"chart","transform":[{"field":"y","type":"stack","sortby":["-_id"],"groupby":["x"]},{"groupby":["series"],"type":"facet"}]}}],"height":150,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y1","x":1},{"y":12,"series":"y1","x":2},{"y":6,"series":"y1","x":3},{"y":14,"series":"y1","x":4},{"y":2,"series":"y1","x":5},{"y":10,"series":"y1","x":6},{"y":7,"series":"y1","x":7},{"y":9,"series":"y1","x":8},{"y":2,"series":"y2","x":1},{"y":4,"series":"y2","x":2},{"y":6,"series":"y2","x":3},{"y":8,"series":"y2","x":4},{"y":13,"series":"y2","x":5},{"y":11,"series":"y2","x":6},{"y":9,"series":"y2","x":7},{"y":2,"series":"y2","x":8}]},{"transform":[{"type":"aggregate","summarize":{"y":"sum"},"groupby":["x"]}],"name":"stats","source":"chart"}],"width":400}</graph> </syntaxhighlight> <graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Legend","fill":"color"}],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"stats","field":"sum_y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["seagreen","orchid"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"layout_start"},"interpolate":{"value":"monotone"},"y2":{"scale":"y","field":"layout_end"},"x":{"scale":"x","field":"x"},"fill":{"scale":"color","field":"series"}}},"type":"area"}],"from":{"data":"chart","transform":[{"field":"y","type":"stack","sortby":["-_id"],"groupby":["x"]},{"groupby":["series"],"type":"facet"}]}}],"height":150,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y1","x":1},{"y":12,"series":"y1","x":2},{"y":6,"series":"y1","x":3},{"y":14,"series":"y1","x":4},{"y":2,"series":"y1","x":5},{"y":10,"series":"y1","x":6},{"y":7,"series":"y1","x":7},{"y":9,"series":"y1","x":8},{"y":2,"series":"y2","x":1},{"y":4,"series":"y2","x":2},{"y":6,"series":"y2","x":3},{"y":8,"series":"y2","x":4},{"y":13,"series":"y2","x":5},{"y":11,"series":"y2","x":6},{"y":9,"series":"y2","x":7},{"y":2,"series":"y2","x":8}]},{"transform":[{"type":"aggregate","summarize":{"y":"sum"},"groupby":["x"]}],"name":"stats","source":"chart"}],"width":400}</graph>

Bar chart with stacked data series: <syntaxhighlight lang="wikitext"> <graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Legend","fill":"color"}],"scales":[{"type":"ordinal","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"stats","field":"sum_y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["seagreen","orchid"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"layout_start"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","field":"layout_end"},"width":{"scale":"x","offset":-1,"band":true},"fill":{"scale":"color","field":"series"}}},"type":"rect"}],"from":{"data":"chart","transform":[{"field":"y","type":"stack","sortby":["-_id"],"groupby":["x"]},{"groupby":["series"],"type":"facet"}]}}],"height":150,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"Data A","x":1},{"y":12,"series":"Data A","x":2},{"y":6,"series":"Data A","x":3},{"y":14,"series":"Data A","x":4},{"y":2,"series":"Data A","x":5},{"y":10,"series":"Data A","x":6},{"y":7,"series":"Data A","x":7},{"y":9,"series":"Data A","x":8},{"y":2,"series":"Data B","x":1},{"y":4,"series":"Data B","x":2},{"y":6,"series":"Data B","x":3},{"y":8,"series":"Data B","x":4},{"y":13,"series":"Data B","x":5},{"y":11,"series":"Data B","x":6},{"y":9,"series":"Data B","x":7},{"y":2,"series":"Data B","x":8}]},{"transform":[{"type":"aggregate","summarize":{"y":"sum"},"groupby":["x"]}],"name":"stats","source":"chart"}],"width":400}</graph> </syntaxhighlight> <graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Legend","fill":"color"}],"scales":[{"type":"ordinal","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"stats","field":"sum_y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["seagreen","orchid"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"layout_start"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","field":"layout_end"},"width":{"scale":"x","offset":-1,"band":true},"fill":{"scale":"color","field":"series"}}},"type":"rect"}],"from":{"data":"chart","transform":[{"field":"y","type":"stack","sortby":["-_id"],"groupby":["x"]},{"groupby":["series"],"type":"facet"}]}}],"height":150,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"Data A","x":1},{"y":12,"series":"Data A","x":2},{"y":6,"series":"Data A","x":3},{"y":14,"series":"Data A","x":4},{"y":2,"series":"Data A","x":5},{"y":10,"series":"Data A","x":6},{"y":7,"series":"Data A","x":7},{"y":9,"series":"Data A","x":8},{"y":2,"series":"Data B","x":1},{"y":4,"series":"Data B","x":2},{"y":6,"series":"Data B","x":3},{"y":8,"series":"Data B","x":4},{"y":13,"series":"Data B","x":5},{"y":11,"series":"Data B","x":6},{"y":9,"series":"Data B","x":7},{"y":2,"series":"Data B","x":8}]},{"transform":[{"type":"aggregate","summarize":{"y":"sum"},"groupby":["x"]}],"name":"stats","source":"chart"}],"width":400}</graph>

Pie charts

<syntaxhighlight lang="wikitext"> <graph>{"legends":[{"properties":{"legend":{"y":{"value":-100}},"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Letter","fill":"color"}],"scales":[{"domain":{"data":"chart","field":"x"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"arc","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"x"}},"enter":{"endAngle":{"field":"layout_end"},"innerRadius":{"value":0},"outerRadius":{"value":100},"startAngle":{"field":"layout_start"},"stroke":{"value":"white"},"fill":{"scale":"color","field":"x"},"strokeWidth":{"value":1}}},"from":{"data":"chart","transform":[{"type":"pie","field":"y"}]}}],"height":100,"axes":[],"data":[{"format":{"parse":{"y":"integer","x":"string"},"type":"json"},"name":"chart","values":[{"y":100,"x":"A"},{"y":200,"x":"B"},{"y":150,"x":"C"},{"y":300,"x":"D"},{"y":100,"x":"E"},{"y":100,"x":"F"},{"y":150,"x":"G"},{"y":50,"x":"H"},{"y":200,"x":"I"}]}],"width":100}</graph> </syntaxhighlight> <graph>{"legends":[{"properties":{"legend":{"y":{"value":-100}},"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Letter","fill":"color"}],"scales":[{"domain":{"data":"chart","field":"x"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"arc","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"x"}},"enter":{"endAngle":{"field":"layout_end"},"innerRadius":{"value":0},"outerRadius":{"value":100},"startAngle":{"field":"layout_start"},"stroke":{"value":"white"},"fill":{"scale":"color","field":"x"},"strokeWidth":{"value":1}}},"from":{"data":"chart","transform":[{"type":"pie","field":"y"}]}}],"height":100,"axes":[],"data":[{"format":{"parse":{"y":"integer","x":"string"},"type":"json"},"name":"chart","values":[{"y":100,"x":"A"},{"y":200,"x":"B"},{"y":150,"x":"C"},{"y":300,"x":"D"},{"y":100,"x":"E"},{"y":100,"x":"F"},{"y":150,"x":"G"},{"y":50,"x":"H"},{"y":200,"x":"I"}]}],"width":100}</graph>

<syntaxhighlight lang="wikitext"> <graph>{"legends":[{"properties":{"legend":{"y":{"value":-100}},"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Letter","fill":"color"}],"scales":[{"domain":{"data":"chart","field":"x"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"arc","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"x"}},"enter":{"endAngle":{"field":"layout_end"},"innerRadius":{"value":0},"outerRadius":{"value":100},"startAngle":{"field":"layout_start"},"stroke":{"value":"white"},"fill":{"scale":"color","field":"x"},"strokeWidth":{"value":1}}},"from":{"data":"chart","transform":[{"type":"pie","field":"y"}]}},{"type":"text","properties":{"enter":{"theta":{"field":"layout_mid"},"baseline":{"value":"top"},"align":{"value":"center"},"text":{"field":"y"},"y":{"group":"height","mult":0.5},"x":{"group":"width","mult":0.5},"fontSize":{"value":10},"angle":{"mult":57.29577951308232,"field":"layout_mid"},"radius":{"offset":-4,"value":100},"fill":{"value":"white"}}},"from":{"data":"chart","transform":[{"field":"y","type":"pie"}]}}],"height":100,"axes":[],"data":[{"format":{"parse":{"y":"integer","x":"string"},"type":"json"},"name":"chart","values":[{"y":100,"x":"A"},{"y":200,"x":"B"},{"y":150,"x":"C"},{"y":300,"x":"D"},{"y":100,"x":"E"},{"y":100,"x":"F"},{"y":150,"x":"G"},{"y":50,"x":"H"},{"y":200,"x":"I"}]}],"width":100}</graph> </syntaxhighlight> <graph>{"legends":[{"properties":{"legend":{"y":{"value":-100}},"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Letter","fill":"color"}],"scales":[{"domain":{"data":"chart","field":"x"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"arc","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"x"}},"enter":{"endAngle":{"field":"layout_end"},"innerRadius":{"value":0},"outerRadius":{"value":100},"startAngle":{"field":"layout_start"},"stroke":{"value":"white"},"fill":{"scale":"color","field":"x"},"strokeWidth":{"value":1}}},"from":{"data":"chart","transform":[{"type":"pie","field":"y"}]}},{"type":"text","properties":{"enter":{"theta":{"field":"layout_mid"},"baseline":{"value":"top"},"align":{"value":"center"},"text":{"field":"y"},"y":{"group":"height","mult":0.5},"x":{"group":"width","mult":0.5},"fontSize":{"value":10},"angle":{"mult":57.29577951308232,"field":"layout_mid"},"radius":{"offset":-4,"value":100},"fill":{"value":"white"}}},"from":{"data":"chart","transform":[{"field":"y","type":"pie"}]}}],"height":100,"axes":[],"data":[{"format":{"parse":{"y":"integer","x":"string"},"type":"json"},"name":"chart","values":[{"y":100,"x":"A"},{"y":200,"x":"B"},{"y":150,"x":"C"},{"y":300,"x":"D"},{"y":100,"x":"E"},{"y":100,"x":"F"},{"y":150,"x":"G"},{"y":50,"x":"H"},{"y":200,"x":"I"}]}],"width":100}</graph>

<syntaxhighlight lang="wikitext"> <graph>{"legends":[{"properties":{"legend":{"y":{"value":-100}},"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Letter","fill":"color"}],"scales":[{"domain":{"data":"chart","field":"x"},"type":"ordinal","name":"color","range":"category10"},{"range":[0,100],"type":"linear","name":"r","domain":{"data":"chart","field":"r"}}],"version":2,"marks":[{"type":"arc","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"x"}},"enter":{"endAngle":{"field":"layout_end"},"innerRadius":{"value":0},"outerRadius":{"scale":"r","field":"r"},"startAngle":{"field":"layout_start"},"stroke":{"value":"white"},"fill":{"scale":"color","field":"x"},"strokeWidth":{"value":1}}},"from":{"data":"chart","transform":[{"type":"pie","field":"y"}]}},{"type":"text","properties":{"enter":{"theta":{"field":"layout_mid"},"baseline":{"value":"top"},"align":{"value":"center"},"text":{"field":"y"},"y":{"group":"height","mult":0.5},"x":{"group":"width","mult":0.5},"fontSize":{"value":10},"angle":{"mult":57.29577951308232,"field":"layout_mid"},"radius":{"scale":"r","offset":-4,"field":"r"},"fill":{"value":"white"}}},"from":{"data":"chart","transform":[{"field":"y","type":"pie"}]}}],"height":100,"axes":[],"data":[{"format":{"parse":{"y":"integer","x":"string","r":"integer"},"type":"json"},"name":"chart","values":[{"y":100,"x":"A","r":7},{"y":200,"x":"B","r":8},{"y":150,"x":"C","r":9},{"y":300,"x":"D","r":8},{"y":100,"x":"E","r":8},{"y":100,"x":"F","r":9},{"y":150,"x":"G","r":10},{"y":50,"x":"H","r":9},{"y":200,"x":"I","r":5}]}],"width":100}</graph> </syntaxhighlight> <graph>{"legends":[{"properties":{"legend":{"y":{"value":-100}},"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Letter","fill":"color"}],"scales":[{"domain":{"data":"chart","field":"x"},"type":"ordinal","name":"color","range":"category10"},{"range":[0,100],"type":"linear","name":"r","domain":{"data":"chart","field":"r"}}],"version":2,"marks":[{"type":"arc","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"x"}},"enter":{"endAngle":{"field":"layout_end"},"innerRadius":{"value":0},"outerRadius":{"scale":"r","field":"r"},"startAngle":{"field":"layout_start"},"stroke":{"value":"white"},"fill":{"scale":"color","field":"x"},"strokeWidth":{"value":1}}},"from":{"data":"chart","transform":[{"type":"pie","field":"y"}]}},{"type":"text","properties":{"enter":{"theta":{"field":"layout_mid"},"baseline":{"value":"top"},"align":{"value":"center"},"text":{"field":"y"},"y":{"group":"height","mult":0.5},"x":{"group":"width","mult":0.5},"fontSize":{"value":10},"angle":{"mult":57.29577951308232,"field":"layout_mid"},"radius":{"scale":"r","offset":-4,"field":"r"},"fill":{"value":"white"}}},"from":{"data":"chart","transform":[{"field":"y","type":"pie"}]}}],"height":100,"axes":[],"data":[{"format":{"parse":{"y":"integer","x":"string","r":"integer"},"type":"json"},"name":"chart","values":[{"y":100,"x":"A","r":7},{"y":200,"x":"B","r":8},{"y":150,"x":"C","r":9},{"y":300,"x":"D","r":8},{"y":100,"x":"E","r":8},{"y":100,"x":"F","r":9},{"y":150,"x":"G","r":10},{"y":50,"x":"H","r":9},{"y":200,"x":"I","r":5}]}],"width":100}</graph>

<syntaxhighlight lang="wikitext"> <graph>{"legends":[{"properties":{"legend":{"y":{"value":-100}},"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Letter","fill":"color"}],"scales":[{"domain":{"data":"chart","field":"x"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"arc","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"x"}},"enter":{"endAngle":{"field":"layout_end"},"innerRadius":{"value":40},"outerRadius":{"value":100},"startAngle":{"field":"layout_start"},"stroke":{"value":"white"},"fill":{"scale":"color","field":"x"},"strokeWidth":{"value":1}}},"from":{"data":"chart","transform":[{"type":"pie","field":"y"}]}}],"height":100,"axes":[],"data":[{"format":{"parse":{"y":"integer","x":"string"},"type":"json"},"name":"chart","values":[{"y":100,"x":"A"},{"y":200,"x":"B"},{"y":150,"x":"C"},{"y":300,"x":"D"},{"y":100,"x":"E"},{"y":100,"x":"F"},{"y":150,"x":"G"},{"y":50,"x":"H"},{"y":200,"x":"I"}]}],"width":100}</graph> </syntaxhighlight> <graph>{"legends":[{"properties":{"legend":{"y":{"value":-100}},"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Letter","fill":"color"}],"scales":[{"domain":{"data":"chart","field":"x"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"arc","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"x"}},"enter":{"endAngle":{"field":"layout_end"},"innerRadius":{"value":40},"outerRadius":{"value":100},"startAngle":{"field":"layout_start"},"stroke":{"value":"white"},"fill":{"scale":"color","field":"x"},"strokeWidth":{"value":1}}},"from":{"data":"chart","transform":[{"type":"pie","field":"y"}]}}],"height":100,"axes":[],"data":[{"format":{"parse":{"y":"integer","x":"string"},"type":"json"},"name":"chart","values":[{"y":100,"x":"A"},{"y":200,"x":"B"},{"y":150,"x":"C"},{"y":300,"x":"D"},{"y":100,"x":"E"},{"y":100,"x":"F"},{"y":150,"x":"G"},{"y":50,"x":"H"},{"y":200,"x":"I"}]}],"width":100}</graph>

Scatter plot

By using a line plot with linewidth=0, it is possible to create a scatter plot: <syntaxhighlight lang="wikitext"> <graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"symSize","range":[8.5]}],"version":2,"marks":[{"type":"line","properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":0}}},"from":{"data":"chart"}},{"type":"symbol","properties":{"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"size":{"scale":"symSize","field":"series"},"fill":{"scale":"color","field":"series"},"stroke":{"scale":"color","field":"series"},"shape":{"value":"circle"},"strokeWidth":{"value":0}}},"from":{"data":"chart"}}],"height":200,"axes":[{"type":"x","scale":"x","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":true},{"type":"y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":true}],"data":[{"format":{"parse":{"y":"integer","x":"number"},"type":"json"},"name":"chart","values":[{"y":1517,"series":"y1","x":15.7},{"y":970,"series":"y1","x":10.8},{"y":4075,"series":"y1","x":68.5},{"y":3819,"series":"y1","x":33.4},{"y":2106,"series":"y1","x":23.8},{"y":2919,"series":"y1","x":42.2},{"y":2428,"series":"y1","x":27.1},{"y":2164,"series":"y1","x":38.2},{"y":1393,"series":"y1","x":13.5},{"y":7603,"series":"y1","x":74.3}]}],"width":500}</graph> </syntaxhighlight> <graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"symSize","range":[8.5]}],"version":2,"marks":[{"type":"line","properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":0}}},"from":{"data":"chart"}},{"type":"symbol","properties":{"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"size":{"scale":"symSize","field":"series"},"fill":{"scale":"color","field":"series"},"stroke":{"scale":"color","field":"series"},"shape":{"value":"circle"},"strokeWidth":{"value":0}}},"from":{"data":"chart"}}],"height":200,"axes":[{"type":"x","scale":"x","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":true},{"type":"y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":true}],"data":[{"format":{"parse":{"y":"integer","x":"number"},"type":"json"},"name":"chart","values":[{"y":1517,"series":"y1","x":15.7},{"y":970,"series":"y1","x":10.8},{"y":4075,"series":"y1","x":68.5},{"y":3819,"series":"y1","x":33.4},{"y":2106,"series":"y1","x":23.8},{"y":2919,"series":"y1","x":42.2},{"y":2428,"series":"y1","x":27.1},{"y":2164,"series":"y1","x":38.2},{"y":1393,"series":"y1","x":13.5},{"y":7603,"series":"y1","x":74.3}]}],"width":500}</graph>

Using percentages

When xAxisFormat or yAxisFormat is set to %, a percentage sign will be added to the scale of the corresponding axis.
A value of 1 equals 100%. A decimal point should be added in front of percentages between 0 and 100, for instance .25 for 25%.
Including the code | yAxisMin=0 | yAxisMax=1 will force the y axis scale to run from 0% to 100%.

<syntaxhighlight lang="wikitext"> <graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"clamp":true,"type":"linear","zero":false,"range":"height","nice":true,"name":"y","domainMax":1,"domain":{"data":"chart","field":"y"},"domainMin":0},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"type":"line"},{"properties":{"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"size":{"value":50},"fill":{"scale":"color","field":"series"},"stroke":{"scale":"color","field":"series"},"shape":{"value":"circle"},"strokeWidth":{"value":0}}},"type":"symbol"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}}],"height":350,"axes":[{"type":"x","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","scale":"y","format":"%","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"number","x":"integer"},"type":"json"},"name":"chart","values":[{"y":0.43,"series":"y1","x":4},{"y":0.39,"series":"y1","x":8},{"y":0.43,"series":"y1","x":9},{"y":0.38,"series":"y1","x":10},{"y":0.38,"series":"y1","x":11},{"y":0.4,"series":"y1","x":12},{"y":0.48,"series":"y1","x":13},{"y":0.54,"series":"y1","x":14},{"y":0.42,"series":"y1","x":15},{"y":0.47,"series":"y1","x":16},{"y":0.45,"series":"y1","x":17},{"y":0.48,"series":"y1","x":18},{"y":0.44,"series":"y1","x":19},{"y":0.41,"series":"y1","x":20},{"y":0.41,"series":"y1","x":21},{"y":0.45,"series":"y1","x":22},{"y":0.46,"series":"y1","x":23},{"y":0.4,"series":"y2","x":1},{"y":0.377,"series":"y2","x":2},{"y":0.38,"series":"y2","x":3},{"y":0.39,"series":"y2","x":5},{"y":0.38,"series":"y2","x":6},{"y":0.419,"series":"y2","x":7},{"y":0.55,"series":"y2","x":8},{"y":0.6,"series":"y2","x":9},{"y":0.63,"series":"y2","x":10},{"y":0.27,"series":"y3","x":1},{"y":0.311,"series":"y3","x":2},{"y":0.31,"series":"y3","x":3},{"y":0.26,"series":"y3","x":5},{"y":0.28,"series":"y3","x":6},{"y":0.285,"series":"y3","x":7},{"y":0.4,"series":"y4","x":8},{"y":0.44,"series":"y4","x":9},{"y":0.42,"series":"y4","x":10},{"y":0.47,"series":"y4","x":11},{"y":0.44,"series":"y4","x":12},{"y":0.43,"series":"y4","x":13},{"y":0.42,"series":"y4","x":14}]}],"width":450}</graph> </syntaxhighlight>

<graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"clamp":true,"type":"linear","zero":false,"range":"height","nice":true,"name":"y","domainMax":1,"domain":{"data":"chart","field":"y"},"domainMin":0},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"type":"line"},{"properties":{"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"size":{"value":50},"fill":{"scale":"color","field":"series"},"stroke":{"scale":"color","field":"series"},"shape":{"value":"circle"},"strokeWidth":{"value":0}}},"type":"symbol"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}}],"height":350,"axes":[{"type":"x","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","scale":"y","format":"%","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"number","x":"integer"},"type":"json"},"name":"chart","values":[{"y":0.43,"series":"y1","x":4},{"y":0.39,"series":"y1","x":8},{"y":0.43,"series":"y1","x":9},{"y":0.38,"series":"y1","x":10},{"y":0.38,"series":"y1","x":11},{"y":0.4,"series":"y1","x":12},{"y":0.48,"series":"y1","x":13},{"y":0.54,"series":"y1","x":14},{"y":0.42,"series":"y1","x":15},{"y":0.47,"series":"y1","x":16},{"y":0.45,"series":"y1","x":17},{"y":0.48,"series":"y1","x":18},{"y":0.44,"series":"y1","x":19},{"y":0.41,"series":"y1","x":20},{"y":0.41,"series":"y1","x":21},{"y":0.45,"series":"y1","x":22},{"y":0.46,"series":"y1","x":23},{"y":0.4,"series":"y2","x":1},{"y":0.377,"series":"y2","x":2},{"y":0.38,"series":"y2","x":3},{"y":0.39,"series":"y2","x":5},{"y":0.38,"series":"y2","x":6},{"y":0.419,"series":"y2","x":7},{"y":0.55,"series":"y2","x":8},{"y":0.6,"series":"y2","x":9},{"y":0.63,"series":"y2","x":10},{"y":0.27,"series":"y3","x":1},{"y":0.311,"series":"y3","x":2},{"y":0.31,"series":"y3","x":3},{"y":0.26,"series":"y3","x":5},{"y":0.28,"series":"y3","x":6},{"y":0.285,"series":"y3","x":7},{"y":0.4,"series":"y4","x":8},{"y":0.44,"series":"y4","x":9},{"y":0.42,"series":"y4","x":10},{"y":0.47,"series":"y4","x":11},{"y":0.44,"series":"y4","x":12},{"y":0.43,"series":"y4","x":13},{"y":0.42,"series":"y4","x":14}]}],"width":450}</graph>

A graph showing values greater than 100% and negative values: <syntaxhighlight lang="wikitext"> <graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"line","properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"from":{"data":"chart"}},{"type":"symbol","properties":{"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"size":{"value":50},"fill":{"scale":"color","field":"series"},"stroke":{"scale":"color","field":"series"},"shape":{"value":"circle"},"strokeWidth":{"value":0}}},"from":{"data":"chart"}}],"height":350,"axes":[{"type":"x","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","scale":"y","format":"%","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"number","x":"integer"},"type":"json"},"name":"chart","values":[{"y":2,"series":"y1","x":1},{"y":0.43,"series":"y1","x":2},{"y":1.2,"series":"y1","x":3},{"y":0.39,"series":"y1","x":4},{"y":0.43,"series":"y1","x":5},{"y":0,"series":"y1","x":6},{"y":-0.38,"series":"y1","x":7},{"y":-0.2,"series":"y1","x":8},{"y":0.18,"series":"y1","x":9},{"y":0.54,"series":"y1","x":10},{"y":0,"series":"y1","x":11}]}],"width":450}</graph> </syntaxhighlight>

<graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"line","properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"from":{"data":"chart"}},{"type":"symbol","properties":{"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"size":{"value":50},"fill":{"scale":"color","field":"series"},"stroke":{"scale":"color","field":"series"},"shape":{"value":"circle"},"strokeWidth":{"value":0}}},"from":{"data":"chart"}}],"height":350,"axes":[{"type":"x","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","scale":"y","format":"%","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"number","x":"integer"},"type":"json"},"name":"chart","values":[{"y":2,"series":"y1","x":1},{"y":0.43,"series":"y1","x":2},{"y":1.2,"series":"y1","x":3},{"y":0.39,"series":"y1","x":4},{"y":0.43,"series":"y1","x":5},{"y":0,"series":"y1","x":6},{"y":-0.38,"series":"y1","x":7},{"y":-0.2,"series":"y1","x":8},{"y":0.18,"series":"y1","x":9},{"y":0.54,"series":"y1","x":10},{"y":0,"series":"y1","x":11}]}],"width":450}</graph>

Legends

A legend can be added where there are multiple data series: <syntaxhighlight lang="wikitext"> <graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Legend","fill":"color"}],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"type":"line"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}}],"height":150,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"Blue","x":1},{"y":12,"series":"Blue","x":2},{"y":6,"series":"Blue","x":3},{"y":14,"series":"Blue","x":4},{"y":2,"series":"Blue","x":5},{"y":10,"series":"Blue","x":6},{"y":7,"series":"Blue","x":7},{"y":9,"series":"Blue","x":8},{"y":2,"series":"Orange","x":1},{"y":4,"series":"Orange","x":2},{"y":6,"series":"Orange","x":3},{"y":8,"series":"Orange","x":4},{"y":13,"series":"Orange","x":5},{"y":11,"series":"Orange","x":6},{"y":9,"series":"Orange","x":7},{"y":2,"series":"Orange","x":8}]}],"width":400}</graph> </syntaxhighlight><graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Legend","fill":"color"}],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"type":"line"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}}],"height":150,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"Blue","x":1},{"y":12,"series":"Blue","x":2},{"y":6,"series":"Blue","x":3},{"y":14,"series":"Blue","x":4},{"y":2,"series":"Blue","x":5},{"y":10,"series":"Blue","x":6},{"y":7,"series":"Blue","x":7},{"y":9,"series":"Blue","x":8},{"y":2,"series":"Orange","x":1},{"y":4,"series":"Orange","x":2},{"y":6,"series":"Orange","x":3},{"y":8,"series":"Orange","x":4},{"y":13,"series":"Orange","x":5},{"y":11,"series":"Orange","x":6},{"y":9,"series":"Orange","x":7},{"y":2,"series":"Orange","x":8}]}],"width":400}</graph>

The title can be omitted by leaving the parameter blank: <syntaxhighlight lang="wikitext"> <graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"","fill":"color"}],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"type":"line"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}}],"height":150,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"Blue","x":1},{"y":12,"series":"Blue","x":2},{"y":6,"series":"Blue","x":3},{"y":14,"series":"Blue","x":4},{"y":2,"series":"Blue","x":5},{"y":10,"series":"Blue","x":6},{"y":7,"series":"Blue","x":7},{"y":9,"series":"Blue","x":8},{"y":2,"series":"Orange","x":1},{"y":4,"series":"Orange","x":2},{"y":6,"series":"Orange","x":3},{"y":8,"series":"Orange","x":4},{"y":13,"series":"Orange","x":5},{"y":11,"series":"Orange","x":6},{"y":9,"series":"Orange","x":7},{"y":2,"series":"Orange","x":8}]}],"width":400}</graph> </syntaxhighlight><graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"","fill":"color"}],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"type":"line"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}}],"height":150,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"Blue","x":1},{"y":12,"series":"Blue","x":2},{"y":6,"series":"Blue","x":3},{"y":14,"series":"Blue","x":4},{"y":2,"series":"Blue","x":5},{"y":10,"series":"Blue","x":6},{"y":7,"series":"Blue","x":7},{"y":9,"series":"Blue","x":8},{"y":2,"series":"Orange","x":1},{"y":4,"series":"Orange","x":2},{"y":6,"series":"Orange","x":3},{"y":8,"series":"Orange","x":4},{"y":13,"series":"Orange","x":5},{"y":11,"series":"Orange","x":6},{"y":9,"series":"Orange","x":7},{"y":2,"series":"Orange","x":8}]}],"width":400}</graph>

Long legend entries can look clumsy. It may be better to omit the legend parameter and use {{Legend}} (or a similar template) instead: <syntaxhighlight lang="wikitext"> <graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["darkred","gold"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"type":"line"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}}],"height":150,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y1","x":1},{"y":12,"series":"y1","x":2},{"y":6,"series":"y1","x":3},{"y":14,"series":"y1","x":4},{"y":2,"series":"y1","x":5},{"y":10,"series":"y1","x":6},{"y":7,"series":"y1","x":7},{"y":9,"series":"y1","x":8},{"y":2,"series":"y2","x":1},{"y":4,"series":"y2","x":2},{"y":6,"series":"y2","x":3},{"y":8,"series":"y2","x":4},{"y":13,"series":"y2","x":5},{"y":11,"series":"y2","x":6},{"y":9,"series":"y2","x":7},{"y":2,"series":"y2","x":8}]}],"width":400}</graph>

This is a long legend entry and wouldn't look so good if it was part of the graph itself.

This is another fairly long entry.

</syntaxhighlight><graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["darkred","gold"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"type":"line"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}}],"height":150,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y1","x":1},{"y":12,"series":"y1","x":2},{"y":6,"series":"y1","x":3},{"y":14,"series":"y1","x":4},{"y":2,"series":"y1","x":5},{"y":10,"series":"y1","x":6},{"y":7,"series":"y1","x":7},{"y":9,"series":"y1","x":8},{"y":2,"series":"y2","x":1},{"y":4,"series":"y2","x":2},{"y":6,"series":"y2","x":3},{"y":8,"series":"y2","x":4},{"y":13,"series":"y2","x":5},{"y":11,"series":"y2","x":6},{"y":9,"series":"y2","x":7},{"y":2,"series":"y2","x":8}]}],"width":400}</graph>

This is a long legend entry and wouldn't look so good if it was part of the graph itself.

This is another fairly long entry.

This method also allows the use of wiki formatting and the insertion of links. Graphs using the default colors need to specify the hex values in the legend templates:

#1f77b4

#ff7f0e

#2ca02c

#d62728

#9467bd

#8c564b

#e377c2

#7f7f7f

#bcbd22

#17becf

Alternatively, CSS color names (or hex values) can be specified in the graph and the legend templates.

Annotations

Line Chart with horizontal annotations only: <syntaxhighlight lang="wikitext"> <graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"line","range":[2,4,0]},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"symSize","range":[76.5,76.5,76.5]},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"symShape","range":["triangle-up","cross","cross"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"scale":"line","field":"series"}}},"type":"line"},{"properties":{"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"size":{"scale":"symSize","field":"series"},"fill":{"scale":"color","field":"series"},"stroke":{"scale":"color","field":"series"},"shape":{"scale":"symShape","field":"series"},"strokeWidth":{"value":0}}},"type":"symbol"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}},{"type":"rule","properties":{"update":{"y":{"scale":"y","field":"y"},"x":{"value":0},"x2":{"field":{"group":"width"}},"stroke":{"value":"#54595d"},"opacity":{"value":0.75},"strokeWidth":{"value":"#54595d"}}},"from":{"data":"h_anno"}},{"type":"text","properties":{"update":{"y":{"scale":"y","offset":3,"field":"y"},"x":{"value":0,"offset":3},"opacity":{"value":0.75},"baseline":{"value":"top"},"text":{"field":"label"},"angle":{"value":0},"fill":{"value":"#54595d"}}},"from":{"data":"h_anno"}}],"height":200,"axes":[{"type":"x","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","scale":"y","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"number","x":"integer"},"type":"json"},"name":"chart","values":[{"y":0,"series":"y1","x":0},{"y":3.342,"series":"y1","x":1},{"y":2.3423,"series":"y1","x":2},{"y":5.32423,"series":"y1","x":3},{"y":1,"series":"y2","x":0},{"y":2.342,"series":"y2","x":1},{"y":4.63,"series":"y2","x":2},{"y":2.32423,"series":"y2","x":3},{"y":3,"series":"y3","x":0},{"y":1.342,"series":"y3","x":1},{"y":2.63,"series":"y3","x":2},{"y":6.32423,"series":"y3","x":3}]},{"format":{"parse":{"y":"number"},"type":"json"},"name":"h_anno","values":[{"y":"4","label":"label4"},{"y":"5","label":"label5"},{"y":"6","label":"label6"}]}],"width":200}</graph> </syntaxhighlight> <graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"line","range":[2,4,0]},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"symSize","range":[34,136,76.5]},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"symShape","range":["triangle-up","cross","square"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"scale":"line","field":"series"}}},"type":"line"},{"properties":{"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"size":{"scale":"symSize","field":"series"},"fill":{"scale":"color","field":"series"},"stroke":{"scale":"color","field":"series"},"shape":{"scale":"symShape","field":"series"},"strokeWidth":{"value":0}}},"type":"symbol"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}},{"type":"rule","properties":{"update":{"y":{"scale":"y","field":"y"},"x":{"value":0},"x2":{"field":{"group":"width"}},"stroke":{"value":"#54595d"},"opacity":{"value":0.75},"strokeWidth":{"value":"#54595d"}}},"from":{"data":"h_anno"}},{"type":"text","properties":{"update":{"y":{"scale":"y","offset":3,"field":"y"},"x":{"value":0,"offset":3},"opacity":{"value":0.75},"baseline":{"value":"top"},"text":{"field":"label"},"angle":{"value":0},"fill":{"value":"#54595d"}}},"from":{"data":"h_anno"}}],"height":200,"axes":[{"type":"x","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","scale":"y","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"number","x":"integer"},"type":"json"},"name":"chart","values":[{"y":0,"series":"y1","x":0},{"y":3.342,"series":"y1","x":1},{"y":2.3423,"series":"y1","x":2},{"y":5.32423,"series":"y1","x":3},{"y":1,"series":"y2","x":0},{"y":2.342,"series":"y2","x":1},{"y":4.63,"series":"y2","x":2},{"y":2.32423,"series":"y2","x":3},{"y":3,"series":"y3","x":0},{"y":1.342,"series":"y3","x":1},{"y":2.63,"series":"y3","x":2},{"y":6.32423,"series":"y3","x":3}]},{"format":{"parse":{"y":"number"},"type":"json"},"name":"h_anno","values":[{"y":"4","label":"label4"},{"y":"5","label":"label5"},{"y":"6","label":"label6"}]}],"width":200}</graph>

Area chart with vertical annotations only <syntaxhighlight lang="wikitext"> <graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["#ff5ba0","#1050ff","#aaff00"]},{"type":"ordinal","name":"transparency","range":["1","0.3921568627451","1"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"fill":{"value":"red"}},"update":{"fillOpacity":{"scale":"transparency","field":"series"},"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","value":0},"fill":{"scale":"color","field":"series"}}},"type":"area"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}},{"type":"rule","properties":{"update":{"y":{"value":0},"x":{"scale":"x","field":"x"},"opacity":{"value":0.75},"y2":{"field":{"group":"height"}},"stroke":{"value":"#54595d"},"strokeWidth":{"value":"#54595d"}}},"from":{"data":"v_anno"}},{"type":"text","properties":{"update":{"y":{"offset":-3,"field":{"group":"height"}},"x":{"scale":"x","offset":3,"field":"x"},"opacity":{"value":0.75},"baseline":{"value":"top"},"text":{"field":"label"},"angle":{"value":-90},"fill":{"value":"#54595d"}}},"from":{"data":"v_anno"}}],"height":200,"axes":[{"type":"x","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","scale":"y","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"number","x":"integer"},"type":"json"},"name":"chart","values":[{"y":3,"series":"y1","x":0},{"y":1.342,"series":"y1","x":1},{"y":2.63,"series":"y1","x":2},{"y":6.32423,"series":"y1","x":3},{"y":1,"series":"y2","x":0},{"y":2.342,"series":"y2","x":1},{"y":4.63,"series":"y2","x":2},{"y":2.32423,"series":"y2","x":3},{"y":0,"series":"y3","x":0},{"y":3.342,"series":"y3","x":1},{"y":2.3423,"series":"y3","x":2},{"y":5.32423,"series":"y3","x":3}]},{"format":{"parse":{"x":"integer"},"type":"json"},"name":"v_anno","values":[{"label":"label1","x":"1"},{"label":"label2","x":"2"},{"label":"label3","x":"3"}]}],"width":200}</graph></syntaxhighlight> <graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["#ff5ba0","#1050ff","#aaff00"]},{"type":"ordinal","name":"transparency","range":["1","0.3921568627451","1"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"fill":{"value":"red"}},"update":{"fillOpacity":{"scale":"transparency","field":"series"},"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","value":0},"fill":{"scale":"color","field":"series"}}},"type":"area"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}},{"type":"rule","properties":{"update":{"y":{"value":0},"x":{"scale":"x","field":"x"},"opacity":{"value":0.75},"y2":{"field":{"group":"height"}},"stroke":{"value":"#54595d"},"strokeWidth":{"value":"#54595d"}}},"from":{"data":"v_anno"}},{"type":"text","properties":{"update":{"y":{"offset":-3,"field":{"group":"height"}},"x":{"scale":"x","offset":3,"field":"x"},"opacity":{"value":0.75},"baseline":{"value":"top"},"text":{"field":"label"},"angle":{"value":-90},"fill":{"value":"#54595d"}}},"from":{"data":"v_anno"}}],"height":200,"axes":[{"type":"x","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","scale":"y","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"number","x":"integer"},"type":"json"},"name":"chart","values":[{"y":3,"series":"y1","x":0},{"y":1.342,"series":"y1","x":1},{"y":2.63,"series":"y1","x":2},{"y":6.32423,"series":"y1","x":3},{"y":1,"series":"y2","x":0},{"y":2.342,"series":"y2","x":1},{"y":4.63,"series":"y2","x":2},{"y":2.32423,"series":"y2","x":3},{"y":0,"series":"y3","x":0},{"y":3.342,"series":"y3","x":1},{"y":2.3423,"series":"y3","x":2},{"y":5.32423,"series":"y3","x":3}]},{"format":{"parse":{"x":"integer"},"type":"json"},"name":"v_anno","values":[{"label":"label1","x":"1"},{"label":"label2","x":"2"},{"label":"label3","x":"3"}]}],"width":200}</graph>

Display

Putting a Chart in an {{image frame}} allows the graph to float and text may wrap around it:
<syntaxhighlight lang="wikitext">

<graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"clamp":true,"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"domainMin":-1,"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"line","properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"from":{"data":"chart"}}],"height":150,"axes":[{"type":"x","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y","x":1},{"y":12,"series":"y","x":2},{"y":6,"series":"y","x":3},{"y":14,"series":"y","x":4},{"y":2,"series":"y","x":5},{"y":10,"series":"y","x":6},{"y":7,"series":"y","x":7},{"y":9,"series":"y","x":8}]}],"width":400}</graph>

Line chart

</syntaxhighlight>

<graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"clamp":true,"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"domainMin":-1,"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"line","properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"from":{"data":"chart"}}],"height":150,"axes":[{"type":"x","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y","x":1},{"y":12,"series":"y","x":2},{"y":6,"series":"y","x":3},{"y":14,"series":"y","x":4},{"y":2,"series":"y","x":5},{"y":10,"series":"y","x":6},{"y":7,"series":"y","x":7},{"y":9,"series":"y","x":8}]}],"width":400}</graph>