Template:Graph:Chart
Parameters
[edit]- 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/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 the aa component denotes the alpha channel, i.e. FF=100% opacity, 80=50% opacity/transparency, etc. (The default color palette is category10).
- 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
- 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.
- 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.
- 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
- 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.
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.
Test 1 - hard-coded values
[edit]{{Graph:Chart | item = [[:d:Q2481549|pro forma]] | xaxistitle = month | yaxistitle = passengers (thousands) | x = 1,2,3,4,5,6,7,8,9,10,11,12 | y1= 6463,6360,7411,6664,6945,6790,7150,8089,7041,7482,7432,7068 | y2= 6726,6489,7818,6564,6968,7089,7175,7994,7294,7090,7247,6871 | y3= 6568,5678,2748 | y1title=2018 | y2title=2019 | y3title=2020 | type = line | width = 600 | heigth = 200 | legend = passengers per month | showvalues = fontsize:10,offset:5,angle:90 }}
![]() | Graphs are temporarily unavailable due to technical issues. |
Test 2-values with direct query at Wikidata
[edit]See source Wikidata query and sources.
See also
[edit]- To use with Listeria/Wikidata list, see Template:Wikidata list#Charts
|
Examples
[edit]Line Chart:
Note: The y-axis starts from the smallest y value, though this can be overridden with the yAxisMin parameter.
Area chart:
Note: The y-axis starts from zero
Bar chart:
Line chart with more than one data series, using colors:
Area chart with more than one data series showing blended overlap:
Bar chart with multiple data series:
Area chart with smoothed data values:
Bar chart with stacked data series:
{{Graph:Chart|width=100|height=100|type=pie|legend=Legende|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=Legende|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=Legende|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=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200}}
See also
[edit]
|
The above documentation is transcluded from Template:Graph:Chart/doc (edit | history). Editors can experiment in this template's sandbox (create | mirror) and testcases (create) page. Please add categories to the /doc subpage. Subpages of this template. |