Template:Graph:Chart
 | This template uses Lua: |
| Related pages |
|---|
Template:TemplateStyles Template:Meta
Parameters
Examples
Basic examples
Line Chart:
{{Graph:Chart
| width = 450
| height = 150
| type = line
| x = 1,2,3,4,5,6,7,8,9
| y = 10,12,6,14,2,10,7,9,12
}}
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
}}
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
| y=10,12,6,14,2,10,7,9
}}
Multiple data series
Line 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
}}
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
}}
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
}}
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
}}
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
}}
Pie charts
{{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
}}
{{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=
}}
{{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=
}}
{{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
}}
Scatter plot
By using a line plot with linewidth=0, it is possible to create a scatter plot:
{{Graph:Chart
|width=500
|height=200
|type=line
|x=15.7,10.8,68.5,33.4,23.8,42.2,27.1,38.2,13.5,74.3
|y1=1517,970,4075,3819,2106,2919,2428,2164,1393,7603
|showSymbols=1
|linewidth=0
|yGrid= |xGrid=
}}
Using percentages
- When
xAxisFormatoryAxisFormatis set to%, a percentage sign will be added to the scale of the corresponding axis. - A value of
1equals 100%. A decimal point should be added in front of percentages between 0 and 100, for instance.25for 25%. - Including the code
| yAxisMin=0 | yAxisMax=1will 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
}}
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
}}
Display
Line chart in an {{image frame}}:
{{Image frame
| caption=Line chart
| content = {{Graph:Chart
| width=400
| height=150
| type=line
| yAxisMin = -1
| x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9
}}
}}
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
}}
| A graph of something | |
| Caption & source links here | |
Legends
A 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
}}
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
}}
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.}}
Template:Legend Template:Legend
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:
Template:Columns-list
Alternatively, CSS color names (or hex values) can be specified in the graph and the legend templates.