Module:Charts SVG/doc

This is the documentation page for Module:Charts SVG

This module is rated as alpha. It is ready for third-party input, and may be used on a few pages to see if problems arise, but should be watched. Suggestions for new features or changes in their input and output mechanisms are welcome.

This documentation is intended to be the released documentation for the module.

Therefore this notice will be removed when the module is 'released' (when the rating is changed from alpha to beta). For background to the project, and current issues with the module, see Module talk:Charts SVG.

This module creates charts by the generation of code for an SVG file.

The module exposes five functions: barChart, lineChart, mixedChart, scatterChart and pieChart.

Setup & Usage

This module is not intended to be used in Wikipedia articles. It is best used in a page in your own userspace, or in a sandbox. On an existing page, just add {{#invoke:Charts SVG}} (with further parameters) to the page, and click Preview. When you do, the module will show a box that includes a lot of text, starting with <?xml version="1.0" encoding="UTF-8" ?>.

The process of using the module from there involves a number of steps:

on your computer, create a file with the filename extension '.svg' (eg: mychart.svg)
open this file with a text editor (eg: Notepad)
back in your browser, use your mouse to select the text within the box. It will start with <?xml version="1.0" encoding="UTF-8" ?> and end with </svg>.
copy this text, paste it into the file on your computer, and save the file.
To test the file is producing the image you want, you can view the file directly in some web browsers, or go to the Wikimedia Labs SVG Checker.

Note that results in web browsers, and in the Wikimedia Labs checker, may be different from the final Wikimedia rendering. Currently the only way to be absolutely sure of the final rendering is to upload the file and view it on a Wikipedia page.

Once you are happy with the image, upload the .svg file, then you can use it in a Wikipedia article using a [[File:]] link.
If you upload the image to commons, please add [[Category:Charts created with Charts SVG]] to the bottom of the file description page for the image.
It is also good practice to include the module-call that produced the image on the file description page.

Invoking the Module

The first parameter in the module call must be one of the following function names:

barChart	Creates a bar chart with X and Y axes, showing vertical bars of height Y at position X.
lineChart	Creates a line chart with X and Y axes, showing lines between specified X/Y points.
mixedChart	Creates a chart with X and Y axes, with both bars and lines.
scatterChart	Creates a scatter chart with X and Y axes, showing markers at specified X/Y points.
pieChart	Creates a pie chart with segments proportional to each of a series of values.

Without further parameters the module will produce (for barChart, lineChart, mixedChart and scatterChart) a chart with X and Y axes and gridlines, but no other content. For a pieChart, it will produce a completely blank image.

A note on terminology: throughout this documentation 'image' means the whole area produced by the SVG code produced by this module, while 'chart' refers to the area bounded by the X and Y axes (or, for pie charts, the rectangle that includes the pie). Most texts appear (by default) outside the area of the 'chart'.

Script Errors and Messages

Instead of the SVG code, you may get some red text saying Script error. You can click on that text to get the details of the error. If the details simply say 'Script error: No such module.', the module name is in error. WP is case-sensitive about module names, so make sure the name is 'Charts SVG'. If the details say 'Script error: The function you specified did not exist.', the first parameter is not one of the exposed function names.

Any other Script errors are errors in the module script itself. Hopefully these do not occur, but if they do, please report them at Module talk:Charts SVG, including the backtrace information and details of the module call.

Output may also, instead of SVG code, be messages headed "Charts SVG messages", containing messages from the module about problems with the supplied parameters. A maximum of 10 problems are reported.

Parameters - X/Y Graphs

for some parameters named using the style eg: Series<N>Values, parameters are ignored beyond the first value of <N> that does not have a parameter defined

eg: if only Series1Values, Series2Values and Series4Values are defined, only series 1 and 2 will be used. This is noted in the parameter descriptions as "Must be in sequence."

Chart Size

Parameter	Chart Types	Description	Type & Limits
ChartWidth	bar line mixed scatter	Sets the width of the chart, in pixels. Default: 500	Numeric must be >= 200
ChartHeight	bar line mixed scatter	Sets the width of the chart, in pixels. Default: 350	Numeric must be >= 200

Axes

X and Y Axes

Parameter	Chart Types	Description	Type & Limits
XMin YMin	bar line mixed scatter	The minimum value for the range of numbers shown on the axis. Default: 0	Numeric
XMax YMax	bar line mixed scatter	The maximum value for the range of numbers shown on the axis. Default: 100	Numeric
XAxisValueStep YAxisValueStep	bar line mixed scatter	The interval between intermediate values shown on the axis, and therefore the major tick-marks. Default: 10	Numeric
XAxisMark2Step YAxisMark2Step	bar line mixed scatter	The interval between minor tick-marks shown on the axis. If not set, minor tick-marks are not shown.	Numeric

Grid Lines

Grid lines are shown on charts (with axes) by default, though defining any data groups will hide the XAxis (vertical) grid lines. The default grid interval is that of the major tick-marks, which is equal to the ValueStep parameter for the axis.

Parameter	Chart Types	Description	Type & Limits
XGrid YGrid	bar line mixed scatter	A value of none will hide the grid lines for the axis. Any numeric value sets the grid line interval. Default: the ValueStep value for the axis.	Numeric or none

Second Y Axis

A second Y axis can be shown on the right hand side of the chart. The switch to show this axis is setting Y2Max to any value. However if Stack or Stack100 are set, a second Y Axis will not be shown.

Parameter	Chart Types	Description	Type & Limits
Y2Min	bar line mixed scatter	The minimum value for the range of numbers shown on the axis. Default: 0	Numeric
Y2Max	bar line mixed scatter	The maximum value for the range of numbers shown on the axis.	Numeric
YAxis2ValueStep	bar line mixed scatter	The interval between intermediate values shown on the axis, and therefore the major tick-marks. Default: 10	Numeric
YAxis2Mark2Step	bar line mixed scatter	The interval between minor tick-marks shown on the axis. If not set, minor tick-marks are not shown.	Numeric

Note that the zero points of the left and right Y axes will only automatically align if both YMin and Y2Min are zero.

Axis Titles and Values

Parameter	Chart Types	Description	Type & Limits
XAxisTitle YAxisTitle YAxis2Title	bar line mixed scatter	Adds a title for the axis, which appears outside the axis values.	String
XAxisValueMultiplier YAxisValueMultiplier YAxis2ValueMultiplier	bar line mixed scatter	Multiplies the displayed values by the specified value. A common pattern would be to set YAxisValueMultiplier to 0.001, which would show '1', '2', ... on the Y axis instead of '1,000', '2,000'. Note that the Y data values in this example must still be in the range YMin to YMax.Default: 1	Numeric
XAxisValueRound YAxisValueRound YAxis2ValueRound	bar line mixed scatter	Rounds the displayed values to the specified precision. Positive values round to that number of decimal places (but note that it will not add zeros to that number of places). Negative values round to that number of places above zero (eg: -3 will round to the nearest 1000). A value of zero will round to the nearest integer. The default is the number of decimal places in the axis ValueStep (eg: XAxisValueStep).	Numeric
XAxisValuePrefix YAxisValuePrefix YAxis2ValuePrefix	bar line mixed scatter	Add text to the start of the axis values. An underline in this text will be converted to a space when displayed. Commonly this would be $.	String
XAxisValueSuffix YAxisValueSuffix YAxis2ValueSuffix	bar line mixed scatter	Add text to the start of the axis values. An underline in this text will be converted to a space when displayed. Commonly this would be %.	String
XAxisValueFormat YAxisValueFormat YAxis2ValueFormat	bar line mixed scatter	By default the module will add numeric (eg: thousands) separators to numeric axis values if the maximum value for the axis (eg: XMax) is 10,000 or greater. Setting the ValueFormat parameter to none for an axis will suppress this formatting, any other value will force it to occur (regardless of the axis max value). Note that group names are text, and never re-formatted by the module.	String
XAxisValueRotate	bar line mixed scatter	Sets the angle by which the X-Axis values are rotated. By default the module shows X-Axis values horizontally, and centered on the mark. Rotating the text sets the start (for +ve rotate values) or end (for -ve rotate values) of the text near the mark. Default: 0	Numeric (-90 to 90)

Axis Line Colors

Parameter	Chart Types	Description	Type & Limits
YAxisColor YAxis2Color	bar line mixed scatter	The color for the axis line. Must be a number in the colors table or an SVG color term. Default: black	String

Data Series

Parameter	Chart Types	Description	Type & Limits
Series1Values (Series2Values, ...) Must be in sequence.	bar line mixed scatter	A string containing a series of X and Y numeric-value pairs, all separated by spaces. Each pair specifies a point (in scatter and line charts), or an X-position and bar-height (in bar charts). Points, lines and bars in a series are all shown in the same style.	String
Series1Type (Series2Type, ...)	mixed	line (default) sets the series to be a line graph bar sets the series to be a bar graph	String
Series1YAxis2 (Series2YAxis2, ...)	bar line mixed scatter	Any value sets the series to use the 2nd Y axis (if it is displayed) as the scale for the Y values.	Any
Series1Labels (Series2Labels, ...)	bar line mixed scatter	Any value sets the series to show the Y-value of each data point next to that point (or above the bar). The default size for the labels text is the same as that for chart texts. Labels are not shown if Stack100 is set.	String
Series1Color (Series2Color, ...)	bar line mixed scatter	The color of the markers, lines or bars. Must be a number in the colors table or an SVG color term. The default color for series N is color N from the colors table.	String
Series1Line (Series2Line, ...)	line mixed scatter	Any value except none will show a line between the points of the series, none will hide the line. The default for scatter charts is none, for line charts yes.	String
Series1Width (Series2Width, ...)	line mixed scatter	The width of the line for the series, as a percentage of the standard line width. Default: 100	Numeric +ve only
Series1Dash (Series2Dash, ...)	line mixed scatter	The dash pattern for the line for the series. Either a number (1 to 8), which will select a pattern from the dash patterns table, or an SVG dash pattern term. All lines are solid by default.	Numeric (1-8) or string
Series1Marker (Series2Marker, ...)	line mixed scatter	The marker shown at the points for the series. A number (1 to 7) will select a marker from the markers table. none will hide the markers for the series. Markers and lines for a series are always the same color.	Numeric (0-7) or none
Series1MarkerSize (Series2MarkerSize, ...)	line mixed scatter	The size of the series markers, as a percentage of the standard size. Default: 100	Numeric +ve only
Series1MarkerFill (Series2MarkerFill, ...)	line mixed scatter	The fill color for the series markers. Must be a number in the colors table or an SVG color term. The default color for series N is color N from the colors table.	String
Series1Pattern (Series2Pattern, ...)	bar line mixed	The fill pattern for the area fill or bar. Must be a number in the fill-patterns table.	Numeric
Series1PatternColor (Series2PatternColor, ...)	bar line mixed	The color used for the fill pattern. Must be a number in the colors table or an SVG color term. The default color is black.	String

Be aware that data series are displayed in reverse order, so series 1 is shown in front of series 2.

Data Groups

Parameter	Chart Types	Description	Type & Limits
Group1Text (Group2Text, ...) Must be in sequence.	bar line mixed scatter	The name for the data group. If Group1Text is defined, the X axis will be divided into groups as required, and the X values in Series1Values (etc.) must be numbers corresponding to the defined groups. The XMin and XMax parameters will be ignored.	String

Bar Width & Spacing

Parameter	Chart Types	Description	Type & Limits
BarWidth	bar mixed	The width of bars, in pixels. Only used if groups are not defined. Default: 20	Numeric +ve only
BarSpace	bar mixed	The width of the gap between bars in a group, as a percentage of the bar width. Only used if groups are defined. Default: 0	Numeric +ve only

Chart Variations

Parameter	Chart Types	Description	Type & Limits
Area	line	Any value sets all series lines to be filled with color (or a fill pattern) from the X axis to the line.	Any
Stack	bar line	Only valid if data groups are defined. Any value sets series Y values to be stacked. Be aware that this may require adjustment of the YMax value for proper display. Negative values are stacked separately from positive values.	Any
Stack100	bar line	Only valid if data groups are defined. Any value sets series Y values to be stacked, then re-scaled to the range 1 to 100. The Y axis will be forced to the range 1 to 100 (the YMin and YMax parameters will be ignored), and YAxisValueSuffix will be set to %.	Any

In a lineChart, setting Stack or Stack100 will force Area 'on'.

Parameters - Pie Charts

For pie charts, the chart size is calculated from the PieRadius.

Parameter	Chart Types	Description	Type & Limits
PieRadius	pie	The radius of the pie chart, in pixels. Default: 200	Numeric +ve only
Explode	pie	A numeric value will explode the specified number of pie segments (starting with the first) away from the centre. Any non-numeric value will explode all segments.	Any
ExplodeRadius	pie	The proportion of the radius that exploded segments are shifted. A percentage of the total pie radius. Default: if Explode is non-numeric, 10, otherwise 20.	Numeric +ve only
DoughnutHole	pie	A numeric value specifies the size of the hole in the centre of the pie (so producing a doughnut chart), as a percentage of the pie radius. Any non-numeric value will produce the default hole size of 50%.	Any
SegmentText	pie	text will show the segment text next to the segment value will show the data value next to each segment percent will show the percentage of the total values next to each segment Any combination of the above three values can be in the parameter, eg: SegmentText=text percent will show the segment text followed by the percentage. The font size for segment texts is the same as that for legend texts.	String
SegmentTextWidth	pie	Sets the horizontal space allowed for all segment texts, as a percentage of the standard width. The standard width allows for about 10 characters. Set this parameter above 100 if any of the segment texts fail to show completely. Default: 100	Numeric +ve only
SegmentTextRadius	pie	The proportion of the radius at which segment texts are placed. A percentage of the pie radius. Default: 105	Numeric +ve only
PieStartAngle	pie	Sets the angle at which the first segment starts. Default: 0 The default means the first segment will start at the normal start for trigonometric circles, the X-axis (ie: 3 o'clock).	Numeric 0 to 360 only
PieSweepDir	pie	Sets the direction segments sweep in. Any value other than the default will cause the segments to sweep in a clockwise direction. Default: AntiClockwise	String

Pie Chart Data

Parameter	Chart Types	Description	Type & Limits
Series1Values	pie	A string containing text and value pairs, separated by spaces. The texts will be used for legend or segment texts, the values used to calculate the segments of the pie. In pie charts, parameters Series2Values etc. will be ignored.	String

Pie Segment Appearance

Parameter	Chart Types	Description	Type & Limits
Segment1Color (Segment2Color, ...)	pie	The color of the pie segment. Must be a number in the colors table or an SVG color term. The default color for segment N is color N from the colors table.	String
Segment1Pattern (Segment2Pattern, ...)	pie	The fill pattern for the pie segment. Must be a number in the fill-patterns table.	Numeric
Segment1PatternColor (Segment2PatternColor, ...)	pie	The color used for the fill pattern. Must be a number in the colors table or an SVG color term. The default color is black.	String

Parameters - General

SVG File Descriptive Elements

These parameters set values that are written to the SVG file, but are not displayed in the image.

Parameter	Chart Types	Description	Type & Limits
FileTitle	All	Adds a <title> element to the SVG file. Default: SVG chart	String
FileDesc	All	Adds a <description> element to the SVG file. Default: 'SVG chart generated by Charts SVG'	String

Title and Footnote

Parameter	Chart Types	Description	Type & Limits
Title	All	Shows the text as a title above the chart.	String
TitleX TitleY	bar line mixed scatter	Moves the title from its default position (above the chart) to a specified location within the chart. The X and Y values are the same as for graph points. The position specifies the left end and the vertical baseline of the text.	Numeric
TitleX TitleY	pie	Moves the title from its default position (at the bottom right of the image) to a specified location within the chart. The X and Y values are percentages of the chart size. (0, 0) = bottom left, (50, 50) = the pie origin. The position specifies the left end and the vertical baseline of the text.	Numeric
Footnote	All	Shows the text as a footnote in the bottom right of the image. Note that the footnote (indeed all texts in the SVG file) should not contain wiki-markup, as it will not be interpreted as such when the SVG image is rendered on a Wikipedia page.	String
FootnoteX FootnoteY	bar line mixed scatter	Moves the footnote from its default position (at the bottom right of the image) to a specified location within the chart. The X and Y values are the same as for graph points. The position specifies the left end and the vertical baseline of the text.	Numeric
FootnoteX FootnoteY	pie	Moves the footnote from its default position (at the bottom right of the image) to a specified location within the chart. The X and Y values are percentages of the chart size. (0, 0) = bottom left, (50, 50) = the pie origin. The position specifies the left end and the vertical baseline of the text.	Numeric

Legend

Parameter	Chart Types	Description	Type & Limits
Series1Text (Series2Text, ...) Must be in sequence.	All	Sets the text that appears in the legend as the name for the series. If no Series<N>Text parameters are set, the legend will not be shown.	String
LegendType	All	vertical (default) will show the legend to the right of the chart, with all legend elements in a vertical column horizontal will show the legend below the chart, with legend elements fitted horizontally into the chart width none will hide the legend	String
LegendTextWidth	All	Sets the horizontal space allowed for all legend texts, as a percentage of the standard width. The standard width allows for about 10 characters. Set this parameter above 100 if any of the legend texts fail to show completely, or if they extend outside the legend box. Default: 100	Numeric +ve only
LegendBorder	All	The color for the border surrounding the legend. Must be a number in the colors table or an SVG color term. A value of none will hide the border. Default: black	String
LegendX LegendY	All	Moves the legend from its default position (which depends on the LegendType setting) to a specified location within the chart. The X and Y values are as for graph points. The position specifies the top left corner of the legend box.	Numeric
LegendSVG	All	Completely replaces the legend with the supplied SVG code.	String

Chart Texts

Additional texts can be shown on the chart. Appropriately placed, they can be a substitute for a legend.

Parameter	Chart Types	Description	Type & Limits
ChartText1 (ChartText2, ...) Must be in sequence.	All	The text to show.	String
ChartText1X (ChartText2X, ...)	bar line mixed scatter	Sets the horizontal location for the text. The value is scaled to the X axis. (If groups are defined, each group is 1 unit wide.) The position specifies the left end of the text. Default: 0	Numeric +ve only
ChartText1X (ChartText2X, ...)	pie	Sets the horizontal location for the text. The value is a percentage of the chart size. The position specifies the left end of the text. Default: 0	Numeric +ve only	Numeric
ChartText1Y (ChartText2Y, ...)	bar line mixed scatter	Sets the vertical location for the text. The value is scaled to the left X axis. The position specifies the baseline of the text. Default: 0	Numeric +ve only
ChartText1X (ChartText2X, ...)	pie	Sets the vertical location for the text. The value is a percentage of the chart size. The position specifies the baseline of the text. Default: 0	Numeric +ve only	Numeric

General Image

Parameter	Chart Types	Description	Type & Limits
ImagePadding	All	Sets the number of pixels in the padding. Replaces the default padding within the image border, on all 4 sides.	Numeric
ImagePaddingTop ImagePaddingBottom ImagePaddingLeft ImagePaddingRight	All	Sets the number of pixels in the padding. Sets the padding amount on one side of the image only. Default: ImagePadding (if set), otherwise 6 pixels.	Numeric
ImageBorder	All	The color of a border at the outside edges of the image. Must be a number in the colors table or an SVG color term. The border (if shown) is always 1px in width.	String
ImageBackgroundColor	All	The color for the background of the whole image. Must be a number in the colors table or an SVG color term. Default: white	String
ImageBackgroundSVG	All	Allows insertion of user-defined SVG code into the file. The specified elements are shown in front of the image background color, but behind all other elements in the image.	String
ImageForegroundSVG	All	Allows insertion of user-defined SVG code into the file. The specified elements are shown in front of all other elements in the image.	String

General Chart

Parameter	Chart Types	Description	Type & Limits
GrayScale GreyScale	All	Any value changes the color table to one of grey-scale equivalents of the colors (see colors table). It also changes the default pattern color to white. Note that any colors defined with a number from the colors table will be shown as the grey-scale equivalent, but colors defined with an SVG color term will be shown with the color as defined.	Any
LineWidth	All	Changes the default width for all line components of the chart. A percentage of the default line width. Default: 100	Numeric +ve only
GraphLineWidth	line mixed scatter	Changes the default width for all series lines on the chart. A percentage of the default line width. Default: 100	Numeric +ve only
ChartBackgroundColor	All	The background color for the chart area. Must be a number in the colors table or an SVG color term.	String

Font Sizes

Parameter	Chart Types	Description	Type & Limits
FontSize	All	Changes the font size for all text elements in the image. A percentage of the default size for each element. Default: 100	Numeric +ve only
LabelsFontSize	All	Changes the font size for data labels in the image. A percentage of the default size for each element. Default: 100	Numeric +ve only
TitleFontSize FootnoteFontSize LegendFontSize ChartTextFontSize	All	Changes the font size for the particular text element. A percentage of the default size for each element. Default: FontSize	Numeric +ve only
XAxisTitleFontSize XAxisValuesFontSize YAxisTitleFontSize YAxisValuesFontSize YAxis2TitleFontSize YAxis2ValuesFontSize	bar line mixed scatter	Changes the font size for the particular text element. A percentage of the default size for each element. Default: FontSize	Numeric +ve only

Bar, Pie-segment and Area Borders

Parameter	Chart Types	Description	Type & Limits
BorderColor	bar line mixed pie	The color of the border around each bar, pie segment or line area. Must be a number in the colors table or an SVG color term. By default, no border is shown.	String
BorderWidth	bar line mixed pie	The width of the border line (if shown) around bars, pie segments and line areas. A percentage of the standard line width. Default: 100	Numeric +ve only

Original Data

Parameter	Chart Types	Description	Type & Limits
IncludeOriginalData	All	auto (default) will include the original data (the SeriesNValues parameters) in the SVG file as comments if the total number of data points is 100 or less, and not include them if it is more then 100 yes will force inclusion of the original data no matter how many data points there are no will force non-inclusion of the original data no matter how many data points there are	String

Debug

Parameter	Chart Types	Description	Type & Limits
Debug	All	A value of parms will show the values of all parameters used in the module. This includes the user-supplied parameters that are recognised, and the default values for all other parameters that have them. It does not include parameters that are not recognised, including because they are mis-spelled or mis-capitalised.	String

Values Tables

Colors

These are the defult colors for data series and pie segments. To set any color, either a number from this table or an SVG color term must be used.

Number	Number	Number
1	11	21
2	12	22
3	13	23
4	14	24
5	15	25
6	16	26
7	17	27
8	18	28
9	19	29
10	20	30

Markers

Markers can be set by a Series<N>Marker parameter having one of these numbers.

Dash Patterns

Dash patterns can be set by a Series<N>Dash parameter having one of these numbers, or by supplying an SVG dash pattern term.

Fill Patterns

Fill patterns can be set by a Series<N>Pattern parameter having one of these numbers.

Notes

Color Terms

Colors in SVG files can be specified in a number of ways.

as a 3- or 6-digit hexadecimal number, prefixed with'#', eg: #f08, or #ff0088 (which are equivalent).
in rgb functional notation, eg: rgb(255, 0, 128) or rgb(100%, 0, 50%) (which are equivalent).
as keywords, eg: blue, red. SVG recognises 147 color keywords, which are listed in the SVG specification.

In all cases an SVG color term should be entered in a parameter without surrounding quotes, eg: Series1Color=rgb(100%, 0%, 50%) or Series1Color=blue.

Color terms are passed to the SVG output as-is. If they are invalid SVG code, this will only be known when the SVG file is viewed as an SVG image. This may produce an error, or the color term will be ignored and the element shown in a default color (usually black).

Dash Pattern Terms

Dash patterns in SVG are specified by a series of space- or comma-separated numbers, which specify the lengths of the drawn or empty sections of the pattern. Eg: '8,2' specifies a dash of length 8 units, followed by a space of 2 units.

Dash pattern terms should be entered in a parameter without surrounding quotes, eg: Series1Dash=8,2.

Dash pattern terms are passed to the SVG output as-is. If they are invalid SVG code, this will only be known when the SVG file is viewed as an SVG image. This may produce an error, or the dash pattern term will be ignored and the element shown as a solid line.

Spaces in Parameters

Some parameters (especially Series1Values, ...) contain multiple values, separated by spaces. The Series<N>Values parameters are written into the SVG code as comments (subject to the IncludeOriginalData parameter). Eg:

{{#invoke:Charts SVG|lineChart|Series1Values=10 90
     20 75
     35 24
     70 62
}}

Groups of spaces and line-breaks are regarded as a single space when separating values.

Examples

Consistent with the various chart types, these examples use almost identical data. For further examples, see User:Innesw/sandbox/Module:Charts SVG/doc/further examples.

`{{#invoke:Charts SVG \| barChart \| FileTitle = Charts SVG Example 1 - Simple Bar Chart \| XMax = 6 \| XAxisValueStep = 1 \| YMax = 160 \| Series1Text = 1st W \| Series1Values = 1 70 2 10 3 50 4 10 5 70 \| Series2Text = 2nd W \| Series2Values = 0.8 80 2.2 20 2.7 65 4.5 40 5.1 90 }}`	Bar chart without groups, ie: bars can be in any X-position.
`{{#invoke:Charts SVG \| lineChart \| FileTitle = Charts SVG Example 2 - Simple Line Chart \| XMax = 6 \| XAxisValueStep = 1 \| YMax = 160 \| Series1Text = 1st W \| Series1Values = 1 70 2 10 3 50 4 10 5 70 \| Series2Text = 2nd W \| Series2Values = 0.8 80 2.2 20 2.7 65 4.5 40 5.1 90 }}`	'W' is more obvious with lines.
`{{#invoke:Charts SVG \| mixedChart \| FileTitle = Charts SVG Example 3 - Simple Mixed Chart \| XMax = 6 \| XAxisValueStep = 1 \| YMax = 160 \| Series1Text = 1st W \| Series1Values = 1 70 2 10 3 50 4 10 5 70 \| Series2Type = bar \| Series2Text = 2nd W \| Series2Values = 0.8 80 2.2 20 2.7 65 4.5 40 5.1 90 }}`	Mixed chart with one series a line, the other is bars.
`{{#invoke:Charts SVG \| scatterChart \| FileTitle = Charts SVG Example 4 - Simple Scatter Chart \| XMax = 6 \| XAxisValueStep = 1 \| YMax = 160 \| Series1Text = 1st W \| Series1Values = 1 70 2 10 3 50 4 10 5 70 \| Series2Text = 2nd W \| Series2Values = 0.8 80 2.2 20 2.7 65 4.5 40 5.1 90 }}`	Scatter chart - points only.
`{{#invoke:Charts SVG \| pieChart \| FileTitle = Charts SVG Example 5 - Simple Pie Chart \| Series1Values = A 80 B 20 C 60 D 20 E 80 }}`
`{{#invoke:Charts SVG \| barChart \| FileTitle = Charts SVG Example 6 - Grouped Bar Chart \| XMax = 6 \| XAxisValueStep = 1 \| YMax = 160 \| Series1Text = 1st W \| Series1Values = 1 70 2 10 3 50 4 10 5 70 \| Series2Text = 2nd W \| Series2Values = 1 80 2 20 3 65 4 40 5 90 \| Group1Text = A \| Group2Text = B \| Group3Text = C \| Group4Text = D \| Group5Text = E }}`	For bar charts with groups, each group is multiple adjacent bars.
`{{#invoke:Charts SVG \| lineChart \| FileTitle = Charts SVG Example 7 - Grouped Line Chart \| XMax = 6 \| XAxisValueStep = 1 \| YMax = 160 \| Series1Text = 1st W \| Series1Values = 1 70 2 10 3 50 4 10 5 70 \| Series2Text = 2nd W \| Series2Values = 1 80 2 20 3 65 4 40 5 90 \| Group1Text = A \| Group2Text = B \| Group3Text = C \| Group4Text = D \| Group5Text = E }}`	For line charts with groups, each group is a single X-position.
{{#invoke:Charts SVG \| mixedChart \| FileTitle = Charts SVG Example 8 - Grouped Mixed Chart \| YMax = 160 \| Series1Text = 1st W \| Series1Values = 1 70 2 10 3 50 4 10 5 70 \| Series2Text = 2nd W \| Series2Type = bar \| Series2Values = 1 80 2 20 3 65 4 40 5 90 \| Series3Text = 3rd W \| Series3Type = bar \| Series3Values = 1 90 2 15 3 45 4 25 5 85 \| Group1Text = A \| Group2Text = B \| Group3Text = C \| Group4Text = D \| Group5Text = E }}	One line series and two bar series.

Development

If you have questions or suggestions, share them at Module talk:Charts SVG.

This module "Charts SVG/doc" is from Wikipedia if otherwise notified

`{{#invoke:Charts SVG \| barChart \| FileTitle = Charts SVG Example 1 - Simple Bar Chart \| XMax = 6 \| XAxisValueStep = 1 \| YMax = 160 \| Series1Text = 1st W \| Series1Values = 1 70 2 10 3 50 4 10 5 70 \| Series2Text = 2nd W \| Series2Values = 0.8 80 2.2 20 2.7 65 4.5 40 5.1 90 }}`	Bar chart without groups, ie: bars can be in any X-position.
`{{#invoke:Charts SVG \| lineChart \| FileTitle = Charts SVG Example 2 - Simple Line Chart \| XMax = 6 \| XAxisValueStep = 1 \| YMax = 160 \| Series1Text = 1st W \| Series1Values = 1 70 2 10 3 50 4 10 5 70 \| Series2Text = 2nd W \| Series2Values = 0.8 80 2.2 20 2.7 65 4.5 40 5.1 90 }}`	'W' is more obvious with lines.
`{{#invoke:Charts SVG \| mixedChart \| FileTitle = Charts SVG Example 3 - Simple Mixed Chart \| XMax = 6 \| XAxisValueStep = 1 \| YMax = 160 \| Series1Text = 1st W \| Series1Values = 1 70 2 10 3 50 4 10 5 70 \| Series2Type = bar \| Series2Text = 2nd W \| Series2Values = 0.8 80 2.2 20 2.7 65 4.5 40 5.1 90 }}`	Mixed chart with one series a line, the other is bars.
`{{#invoke:Charts SVG \| scatterChart \| FileTitle = Charts SVG Example 4 - Simple Scatter Chart \| XMax = 6 \| XAxisValueStep = 1 \| YMax = 160 \| Series1Text = 1st W \| Series1Values = 1 70 2 10 3 50 4 10 5 70 \| Series2Text = 2nd W \| Series2Values = 0.8 80 2.2 20 2.7 65 4.5 40 5.1 90 }}`	Scatter chart - points only.
`{{#invoke:Charts SVG \| pieChart \| FileTitle = Charts SVG Example 5 - Simple Pie Chart \| Series1Values = A 80 B 20 C 60 D 20 E 80 }}`
`{{#invoke:Charts SVG \| barChart \| FileTitle = Charts SVG Example 6 - Grouped Bar Chart \| XMax = 6 \| XAxisValueStep = 1 \| YMax = 160 \| Series1Text = 1st W \| Series1Values = 1 70 2 10 3 50 4 10 5 70 \| Series2Text = 2nd W \| Series2Values = 1 80 2 20 3 65 4 40 5 90 \| Group1Text = A \| Group2Text = B \| Group3Text = C \| Group4Text = D \| Group5Text = E }}`	For bar charts with groups, each group is multiple adjacent bars.
`{{#invoke:Charts SVG \| lineChart \| FileTitle = Charts SVG Example 7 - Grouped Line Chart \| XMax = 6 \| XAxisValueStep = 1 \| YMax = 160 \| Series1Text = 1st W \| Series1Values = 1 70 2 10 3 50 4 10 5 70 \| Series2Text = 2nd W \| Series2Values = 1 80 2 20 3 65 4 40 5 90 \| Group1Text = A \| Group2Text = B \| Group3Text = C \| Group4Text = D \| Group5Text = E }}`	For line charts with groups, each group is a single X-position.
{{#invoke:Charts SVG \| mixedChart \| FileTitle = Charts SVG Example 8 - Grouped Mixed Chart \| YMax = 160 \| Series1Text = 1st W \| Series1Values = 1 70 2 10 3 50 4 10 5 70 \| Series2Text = 2nd W \| Series2Type = bar \| Series2Values = 1 80 2 20 3 65 4 40 5 90 \| Series3Text = 3rd W \| Series3Type = bar \| Series3Values = 1 90 2 15 3 45 4 25 5 85 \| Group1Text = A \| Group2Text = B \| Group3Text = C \| Group4Text = D \| Group5Text = E }}	One line series and two bar series.