Template:Graph:Chart

From Wikimedia Commons, the free media repository
Jump to navigation Jump to search
Template documentationview · edit · history · purge ]
This documentation is transcluded from Template:Graph:Chart/doc.

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, bar or rect for (column) bar charts, and pie for pie charts. Multiple series can stacked using the stacked prefix, e.g. stackedarea, stackedrect.
  • 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 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), and string for ordinal values (use string to prevent axis values from being repeated when there are only a few 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. Setting to 0 with type=line creates a scatter plot.
  • 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:
  • showSymbols: For line charts: show a symbol (circle) at each data point. (usage: showSymbols=true)
  • 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[edit]

Line Chart:

{{Graph:Chart|width=400|height=100|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}}

Note: The y-axis starts from zero


Bar chart:

{{Graph:Chart|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}}

Line chart with more than one data series, using colors:

{{Graph:Chart|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}}

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=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}}

Bar chart with stacked data series:

{{Graph:Chart|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}}

{{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]

Template:Extension:Graph