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. |