Template:Graph:Chart/doc
![]() | Graphs are currently disabled Graphs are unavailable due to a known technical issue. Updates on reimplementing the Graph extension can be found on Phabricator and on MediaWiki.org. |
![]() | 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. |
Template:Graph:Chart is currently disabled - see Template:Graph:Chart on Wikipedia
Generate Graph from CSV
editif want to generate a graph for this template from a CSV file see CSV2Chart. Due to temporary disabled graphs an added feature of CSV2WikiChart allows SVG export of charts.
Parameters
edit![]() | This template uses Lua: |
![]() | This template uses TemplateStyles: |
![](http://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Wikimedia_Community_Logo.svg/40px-Wikimedia_Community_Logo.svg.png)
- width: width of the chart
- height: height of the chart
- type: type of the chart:
line
for line charts,area
for area charts, andrect
for (column) bar charts, andpie
for pie charts. Multiple series can stacked using thestacked
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/vega/vega/wiki/Marks#area. - 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
theaa
component denotes the alpha channel, i.e. FF=100% opacity, 80=50% opacity/transparency, etc. (The default color palette if n <= 10 is Category10: Template:ChartColors else is Category20: Template:ChartColors). - 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 and https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md for date/time. For example, the format
%
can be used to output percentages. - 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), andstring
for ordinal values (usestring
to prevent axis values from being repeated when there are only a few values). - xScaleType and yScaleType: scale types of the x and y axes, e.g.
linear
for linear scale (default),log
for logarithmic scale andsqrt
for square root scale. - x: the x-values as a comma-separated list
- y or y1, y2, …: the y-values for one or several data series, respectively. For pie charts
y2
denotes the radiuses of the corresponding sectors. - 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 number is provided it's size of symbol, default 2.5. may be defined for each series of data with csv, 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
:- 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.
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
editBasic examples
editLine Chart:
{{Graph: Chart | width = 400 | height = 150 | type = line | x = 1,2,3,4,5,6,7,8 | y = 10,12,6,14,2,10,7,9 }}
Note: The y-axis starts from the smallest y value, though this can be overridden with the yAxisMin parameter.
Area chart:
{{Graph:Chart | width=400 | height=100 | type=area | x=1,2,3,4,5,6,7,8 | y=10,12,6,14,2,10,7,9 }}
Template:Graph: Chart Note: The y-axis starts from zero
Bar chart:
{{Graph: Chart | width=400 | height=100 | xAxisTitle=The X axis | yAxisTitle=The Y axis | type=rect | x=1,2,3,4,5,6,7,8,9,10 | y=10,12,6,14,2,10,7,9 }}
Multiple data series
editLine chart with more than one data series, using colors:
{{Graph:Chart | width=400 | height=150 | xAxisTitle=X | yAxisTitle=Y | legend=Legend | type=line | x=1,2,3,4,5,6,7,8 | y1=10,12,6,14,2,10,7,9 | y2=2,4,6,8,13,11,9,2 | colors=#0000aa,#ff8000 }}
![]() | Graphs are unavailable due to a known technical issue. Updates on reimplementing the Graph extension can be found on Phabricator and on MediaWiki.org. |
Area chart with more than one data series showing blended overlap:
{{Graph:Chart | width=400 | height=100 | xAxisTitle=X | yAxisTitle=Y | legend=Legend | type=area | x=1,2,3,4,5,6,7,8 | y1=10,12,6,14,2,10,7,9 | y2=2,4,6,8,13,11,9,2 | colors=#800000aa,#80ff8000 }}
![]() | Graphs are unavailable due to a known technical issue. Updates on reimplementing the Graph extension can be found on Phabricator and on MediaWiki.org. |
Bar chart with multiple data series:
{{Graph:Chart | width=400 | height=100 | xAxisTitle=X | yAxisTitle=Y | legend=Legend | type=rect | x=1,2,3,4,5,6,7,8 | y1=10,12,6,14,2,10,7,9 | y2=2,4,6,8,13,11,9,2 |colors=#800000aa,#80ff8000 }}
![]() | Graphs are unavailable due to a known technical issue. Updates on reimplementing the Graph extension can be found on Phabricator and on MediaWiki.org. |
Area chart with smoothed data values:
{{Graph:Chart | width=400 | height=150 | xAxisTitle=X | yAxisTitle=Y | legend=Legend | type=stackedarea | x=1,2,3,4,5,6,7,8 | y1=10,12,6,14,2,10,7,9 | y2=2,4,6,8,13,11,9,2 | interpolate=monotone | colors=seagreen, orchid }}
![]() | Graphs are unavailable due to a known technical issue. Updates on reimplementing the Graph extension can be found on Phabricator and on MediaWiki.org. |
Bar chart with stacked data series:
{{Graph:Chart | width=400 | height=150 | xAxisTitle=X | yAxisTitle=Y | legend=Legend | type=stackedrect | x=1,2,3,4,5,6,7,8 | y1=10,12,6,14,2,10,7,9 | y2=2,4,6,8,13,11,9,2 | y1Title=Data A | y2Title=Data B | colors=seagreen, orchid }}
![]() | Graphs are unavailable due to a known technical issue. Updates on reimplementing the Graph extension can be found on Phabricator and on MediaWiki.org. |
Pie charts
edit{{Graph:Chart | width=100 | height=100 | type=pie | legend=Letter | x=A,B,C,D,E,F,G,H,I | y1=100,200,150,300,100,100,150,50,200 }}
![]() | Graphs are unavailable due to a known technical issue. Updates on reimplementing the Graph extension can be found on Phabricator and on MediaWiki.org. |
{{Graph:Chart | width=100 | height=100 | type=pie | legend=Letter | x=A,B,C,D,E,F,G,H,I | y1=100,200,150,300,100,100,150,50,200 | showValues= }}
![]() | Graphs are unavailable due to a known technical issue. Updates on reimplementing the Graph extension can be found on Phabricator and on MediaWiki.org. |
{{Graph:Chart | width=100 | height=100 | type=pie | legend=Letter | x=A,B,C,D,E,F,G,H,I | y1=100,200,150,300,100,100,150,50,200 | y2=7,8,9,8,8,9,10,9,5 | showValues= }}
![]() | Graphs are unavailable due to a known technical issue. Updates on reimplementing the Graph extension can be found on Phabricator and on MediaWiki.org. |
{{Graph:Chart | width=100 | height=100 | type=pie | innerRadius=40 | legend=Letter | x=A,B,C,D,E,F,G,H,I | y1=100,200,150,300,100,100,150,50,200 }}
![]() | Graphs are unavailable due to a known technical issue. Updates on reimplementing the Graph extension can be found on Phabricator and on MediaWiki.org. |
Using percentages
edit- When
xAxisFormat
oryAxisFormat
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%.
{{Graph:Chart | width = 450 | height = 350 | x = 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23 | yAxisMin = 0 | yAxisMax = 1 | yAxisFormat = % | showSymbols = | y1 = , , , .43, , , , .39, .43, .38, .38, .40, .48, .54 , .42, .47, .45, .48, .44, .41, .41, .45, .46 | y2 = .40, .377, .38, , .39, .38, .419, .55, .60, .63 | y3 = .27, .311, .31, , .26, .28, .285 | y4 = {{repeat|7|, }} .40, .44, .42, .47, .44, .43, .42 }}
![]() | Graphs are unavailable due to a known technical issue. Updates on reimplementing the Graph extension can be found on Phabricator and on MediaWiki.org. |
A graph showing values greater than 100% and negative values:
{{Graph:Chart | width = 450 | height = 350 | x = 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23 | yAxisFormat = % | showSymbols = | y1 = 2, .43, 1.20, .39, .43, .0, -.38, -.20, .18, .54 , 0 }}
![]() | Graphs are unavailable due to a known technical issue. Updates on reimplementing the Graph extension can be found on Phabricator and on MediaWiki.org. |
Display
editLine chart in an {{image frame}}:
{{Image frame | caption=Line chart | content = {{Graph:Chart | width=400 | height=150 | type=line | x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9 }} }}
![]() | Graphs are unavailable due to a known technical issue. Updates on reimplementing the Graph extension can be found on Phabricator and on MediaWiki.org. |
Bar chart in a {{side box}}:
{{Side box |metadata=No<!--This makes the box display on the mobile site--> | above = '''A graph of something''' | abovestyle = text-align:center | text = {{Graph:Chart |height = 150 |width = 200 |xAxisTitle = Year |xAxisAngle = -40 |yAxisTitle = Units of something |yAxisMin = 0 |type = rect |showValues = offset:4 |x = 2011, 2012, 2013, 2014, 2015, 2016 |y1 = 1326, 145, 203, 377, 639, 306 |y2 = , , , 226, 208, 276 |colors = blue,grey }} | below = Caption & source links here }}
![]() | Graphs are unavailable due to a known technical issue. Updates on reimplementing the Graph extension can be found on Phabricator and on MediaWiki.org. |
Legends
editA legend can be added where there are multiple data series:
{{Graph:Chart | width=400 | height=150 | xAxisTitle=X | yAxisTitle=Y | legend=Legend | y1Title=Blue | y2Title=Orange | type=line | x=1,2,3,4,5,6,7,8 | y1=10,12,6,14,2,10,7,9 | y2=2,4,6,8,13,11,9,2 }}
![]() | Graphs are unavailable due to a known technical issue. Updates on reimplementing the Graph extension can be found on Phabricator and on MediaWiki.org. |
The title can be omitted by leaving the parameter blank:
{{Graph:Chart | width=400 | height=150 | xAxisTitle=X | yAxisTitle=Y | legend= | y1Title=Blue | y2Title=Orange | type=line | x=1,2,3,4,5,6,7,8 | y1=10,12,6,14,2,10,7,9 | y2=2,4,6,8,13,11,9,2 }}
![]() | Graphs are unavailable due to a known technical issue. Updates on reimplementing the Graph extension can be found on Phabricator and on MediaWiki.org. |
Long legend entries can look clumsy. It may be better to omit the legend parameter and use {{Legend}} (or a similar template) instead:
{{Graph:Chart | width=400 | height=150 | xAxisTitle=X | yAxisTitle=Y | colors=darkred, gold | type=line | x=1,2,3,4,5,6,7,8 | y1=10,12,6,14,2,10,7,9 | y2=2,4,6,8,13,11,9,2 }} {{legend|darkred|This is a long legend entry and wouldn't look so good if it was part of the graph itself.}} {{legend|gold|This is another fairly long entry.}}
![]() | Graphs are unavailable due to a known technical issue. Updates on reimplementing the Graph extension can be found on Phabricator and on MediaWiki.org. |
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:
Alternatively, CSS color names (or hex values) can be specified in the graph and the legend templates.