Changes

m
Line 7: Line 7:     
== Examples ==
 
== Examples ==
Line Chart:<br />
+
===Basic examples===
<tt><nowiki>{{GraphChart|width=400|height=100|type=line|x=1,2,3,4,5,6,7,8|y=10, 12, 6, 14, 2, 10, 7, 9}}</nowiki></tt><br />{{GraphChart|width=400|height=100|type=line|x=1,2,3,4,5,6,7,8|y=10, 12, 6, 14, 2, 10, 7, 9}}<br />
+
Line Chart:
 +
<pre>
 +
{{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
 +
}}
 +
</pre>
 +
{{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 <tt>yAxisMin</tt> parameter.
 
Note: The y-axis starts from the smallest y value, though this can be overridden with the <tt>yAxisMin</tt> parameter.
   −
Area chart:<br />
+
Area chart:
<tt><nowiki>{{GraphChart|width=400|height=100|type=area|x=1,2,3,4,5,6,7,8|y=10, 12, 6, 14, 2, 10, 7, 9}}</nowiki></tt><br />{{GraphChart|width=400|height=100|type=area|x=1,2,3,4,5,6,7,8|y=10, 12, 6, 14, 2, 10, 7, 9}}<br />
+
<pre>
 +
{{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
 +
}}
 +
</pre>
 +
{{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
 
Note: The y-axis starts from zero
   −
Bar chart:<br />
+
Bar chart:
<tt><nowiki>{{GraphChart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|type=rect|x=1,2,3,4,5,6,7,8|y=10, 12, 6, 14, 2, 10, 7, 9}}</nowiki></tt><br />{{GraphChart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|type=rect|x=1,2,3,4,5,6,7,8|y=10, 12, 6, 14, 2, 10, 7, 9}}
+
<pre>
 +
{{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
 +
}}
 +
</pre>
 +
{{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:
 +
<pre>
 +
{{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
 +
}}
 +
</pre>{{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:
 +
<pre>
 +
{{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
 +
}}
 +
</pre>{{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:
 +
<pre>
 +
{{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
 +
}}
 +
</pre>
 +
{{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:
 +
<pre>
 +
{{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
 +
}}
 +
</pre>
 +
{{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:
 +
<pre>
 +
{{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
 +
}}
 +
</pre>
 +
{{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===
 +
<pre>
 +
{{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
 +
}}
 +
</pre>
 +
{{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
 +
}}
 +
 
 +
 
 +
<pre>
 +
{{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=
 +
}}
 +
</pre>
 +
{{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=
 +
}}
 +
 
 +
 
 +
<pre>
 +
{{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=
 +
}}
 +
</pre>
 +
{{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=
 +
}}
 +
 
 +
<pre>
 +
{{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
 +
}}
 +
</pre>
 +
{{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 <code>linewidth=0</code>, it is possible to create a [[scatter plot]]:
 +
<pre>
 +
{{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=
 +
}}
 +
</pre>
 +
{{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 <code>xAxisFormat</code> or <code>yAxisFormat</code> is set to <code>%</code>, a percentage sign will be added to the scale of the corresponding axis.
 +
*A value of <code>1</code> equals 100%. A decimal point should be added in front of percentages between 0 and 100, for instance <code>.25</code> for 25%.
 +
*Including the code <code>| yAxisMin=0 | yAxisMax=1</code> will force the y axis scale to run from 0% to 100%.
 +
<pre>
 +
{{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
 +
}}
 +
</pre>
 +
 
 +
{{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:
 +
<pre>
 +
{{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
 +
}}
 +
</pre>
 +
 
 +
{{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 {{tl|image frame}}:<br />
 +
<pre>
 +
{{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
 +
  }}
 +
}}
 +
</pre>
 +
 
 +
{{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 {{tl|side box}}:
 +
<pre>
 +
{{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
 +
}}
 +
</pre>
   −
Line chart with more than one data series, using colors:<br />
+
{{Side box |metadata=No<!--This makes the box display on the mobile site-->
<tt><nowiki>{{GraphChart|width=400|height=100|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}}</nowiki></tt><br />{{GraphChart|width=400|height=100|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}}
+
| 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
 +
}}
 +
{{-}}
   −
Area chart with more than one data series showing blended overlap:<br />
+
====Legends====
<tt><nowiki>{{GraphChart|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}}</nowiki></tt><br />{{GraphChart|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}}
+
A legend can be added where there are multiple data series:
 +
<pre>
 +
{{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
 +
}}
 +
</pre>{{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
 +
}}
   −
Bar chart with multiple data series:<br />
+
The title can be omitted by leaving the parameter blank:
<tt><nowiki>{{GraphChart|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}}</nowiki></tt><br />{{GraphChart|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}}
+
<pre>
 +
{{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
 +
}}
 +
</pre>{{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
 +
}}
   −
Area chart with smoothed data values:<br />
+
Long legend entries can look clumsy. It may be better to omit the legend parameter and use {{tl|Legend}} (or [[:Category:Legend templates|a similar template]]) instead:
<tt><nowiki>{{GraphChart|width=400|height=100|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}}</nowiki></tt><br />{{GraphChart|width=400|height=100|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}}
+
<pre>
 +
{{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.}}
 +
</pre>{{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.}}
   −
Bar chart with stacked data series:<br />
  −
<tt><nowiki>{{GraphChart|width=400|height=100|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}}</nowiki></tt><br />{{GraphChart|width=400|height=100|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}}
     −
Note that the order of the stacking is governed by the alphabetic value of the y-Titles used for the legend. You can always prepend a number 1, 2, 3 to establish whatever stacking order you want.
+
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:
<includeonly>{{#ifeq:{{SUBPAGENAME}}|sandbox | |
+
{{columns-list|colwidth=7em|
<!-- Categories below this line, please; interwikis at Wikidata -->
+
{{legend|#1f77b4|#1f77b4}}
 +
{{legend|#ff7f0e|#ff7f0e}}
 +
{{legend|#2ca02c|#2ca02c}}
 +
{{legend|#d62728|#d62728}}
 +
{{legend|#9467bd|#9467bd}}
 +
{{legend|#8c564b|#8c564b}}
 +
{{legend|#e377c2|#e377c2}}
 +
{{legend|#7f7f7f|#7f7f7f}}
 +
{{legend|#bcbd22|#bcbd22}}
 +
{{legend|#17becf|#17becf}}
 +
}}
   −
}}</includeonly>
+
Alternatively, [https://www.w3schools.com/cssref/css_colors.asp CSS color names] (or hex values) can be specified in the graph and the legend templates.
4,000

edits