charte.ca online chart editor help

Show drill-downs

Allows you to select charts that users will be navigated to when they click on a series. See more about drilldowns in Wikipedia.

Data label and callout format

Type text that you want to see in the data label or callout. The following tags will be replaced by actual values:

{category} - category name (multiple category data only)
{series} - series name
{value} - value

For example, data point formatted with "{category}: {series} {value}%" may end up looking like this: 2013: Firefox 19%.

When displaying numeric values, you can choose number format using Javascript Intl.NumberFormat specification: "{value;NumberFormat:{locale:'<locale>', options:{<options>}}}". For full list of options, check out Intl.NumberFormat documentation at Mozilla developer network.

Examples:

{value;NumberFormat:{locale:'en', options:{useGrouping: true, minimumFractionDigits:2, maximumFractionDigits:2}}}
- a number with thousand separators and exactly 2 digits after decimal point: 2,000.00
{value;NumberFormat:{locale:'en', options:{useGrouping: true, minimumFractionDigits:0, maximumFractionDigits:0}}}
- a number with thousand separators, no decimals: 2,000
{value;NumberFormat:{locale:'en', options:{style: 'currency', currency: 'USD', useGrouping: true, minimumFractionDigits:0, maximumFractionDigits:0}}}
- USD amount with thousand separators and 0 digits after decimal point: $2,000
{value;NumberFormat:{locale:'en', options:{useGrouping: true, minimumFractionDigits:1, maximumFractionDigits:1}}}%
- a number with thousand separators and exactly 1 digit after decimal point, followed by percent sign: 2,000.0%

Callout format for XY charts is fixed and cannot be changed.

More about number formats in charte.ca blog.

Crisp edges

There are two options available for this setting:

Crisp edges - the browser shall attempt to emphasize the contrast between clean edges of artwork over geometric precision. To achieve crisp edges, the user agent might turn off anti-aliasing for all lines and curves or possibly just for straight lines which are close to vertical or horizontal. Also, the browser might adjust line positions and line widths to align edges with device pixels.
Anti-aliased - the browser shall emphasize geometric precision over crisp edges.

Use "Crisp edges" setting only if you are 100% sure that:

chart looks good in the editor;
AND the chart will always be displayed at the same scale (no chart resizing when embedding it into the content)

otherwise lines may look odd. Also, "crisp edges" setting may not work well on high-DPI laptops with image scaling turned on (it is common for high-DPI Windows laptops to have image scaling option set to 125% or 150%).

For more information about chart scaling/resizing, see charte.ca blog.

Axis value format

In most cases, having just "{value}" here will be enough. Sometimes you may want to decorate the value with some additional symbols, for example "{value}%".

When displaying numeric values, you can choose number format using Javascript Intl.NumberFormat specification: "{value;NumberFormat:{locale:'<locale>', options:{<options>}}}". For full list of options, check out Intl.NumberFormat documentation at Mozilla developer network.

Examples:

{value;NumberFormat:{locale:'en', options:{useGrouping: true, minimumFractionDigits:2, maximumFractionDigits:2}}}
- a number with thousand separators and exactly 2 digits after decimal point: 2,000.00
{value;NumberFormat:{locale:'en', options:{useGrouping: true, minimumFractionDigits:0, maximumFractionDigits:0}}}
- a number with thousand separators, no decimals: 2,000
{value;NumberFormat:{locale:'en', options:{style: 'currency', currency: 'USD', useGrouping: true, minimumFractionDigits:0, maximumFractionDigits:0}}}
- USD amount with thousand separators and 0 digits after decimal point: $2,000
{value;NumberFormat:{locale:'en', options:{useGrouping: true, minimumFractionDigits:1, maximumFractionDigits:1}}}%
- a number with thousand separators and exactly 1 digit after decimal point, followed by percent sign: 2,000.0%

More about number formats in charte.ca blog.

Data labels inside/outside bars

inside - data label is displayed within correspondent bar
outside - data label is displayed on top/bottom/left/right of the correspondent bar

This switch is disabled when data labels are disabled in the "Data labels" section of the chart editor.

Data label visibility

Turns on/off static data label visibility. Please note that for some types of charts like bar and pie, labels are not displayed if they do not fit into the correspondent bar or pie sector. For bubble/motion charts, data labels are displayed regardless of the bubble size.

Import flat CSV/TSV data (Pie, Bar, Line)

This is a sample walkthrough that shows how to import comma- or tab-separated values into data grid. It uses the same technique as Excel pivot table does. Each step reperesents a screen of the import wizard.

Step 1: Raw data (tab-separated-values with headers)

Paste your comma- or tab-separated text data into the "raw data" field on step 1 of the import wizard.

Crime category	Crime type	State	State abbr	Year	Crime rate	Population
Violent Crime	Assault	Alaska	AK	1960	45.1	0.2M
Violent Crime	Assault	Alaska	AK	1961	51.7	0.2M
Violent Crime	Assault	Alabama	AL	1960	138.1	3.3M
Violent Crime	Assault	Alabama	AL	1961	128.9	3.3M
Property Crime	Burglary	Alaska	AK	1960	332.1	0.2M
Property Crime	Burglary	Alaska	AK	1961	380.8	0.2M
Property Crime	Burglary	Alabama	AL	1960	355.9	3.3M
Property Crime	Burglary	Alabama	AL	1961	339.3	3.3M

Step 2: Raw data columns to use

"State" column values (Alaska, Alabama) will be used for series names. "Year" column values (1960,1961) will be used for category names. "Crime rate" column values will be used for series/category intersection cells.

Step 3: Filter

In this particular example, we are interested only in Burglary numbers.

Step 4 : aggregate function

No need to specify aggregate function for this example: the "Burglary" filter guarantees there is only one value for each Series/Category pair.

Step 5: Sort order

Sort series and categories in ascending order.

Result

After we complete the wizard, the aggregated data is in the data grid, ready for use by the chart engine.

T	Category	Series	Series
Label		Alabama	Alaska
Value	1960	355.9	332.1
Value	1961	339.3	380.9

For more information about import techniques, see charte.ca blog.

Import flat CSV/TSV data (Scatter regular)

This is a sample walkthrough that shows how to import comma- or tab-separated values into data grid. It shows how raw data samples are converted into data grid columns. Each step reperesents a screen of the import wizard.

Step 1: Raw data (tab-separated-values with headers)

Paste your comma- or tab-separated text data into the "raw data" field on step 1 of the import wizard.

Crime category	Crime type	State	State abbr	Year	Crime rate	Population
Violent Crime	Assault	Alaska	AK	1960	45.1	0.2M
Violent Crime	Assault	Alaska	AK	1961	51.7	0.2M
Violent Crime	Assault	Alabama	AL	1960	138.1	3.3M
Violent Crime	Assault	Alabama	AL	1961	128.9	3.3M
Property Crime	Burglary	Alaska	AK	1960	332.1	0.2M
Property Crime	Burglary	Alaska	AK	1961	380.8	0.2M
Property Crime	Burglary	Alabama	AL	1960	355.9	3.3M
Property Crime	Burglary	Alabama	AL	1961	339.3	3.3M

Step 2: Raw data columns to use

"Population" column values will be used as X axis coordinates. "Crime rate" column values will be used as Y axis coordinates. A few other columns will be used as optional variables, displayed in callouts.

Step 3: Filter

In this particular example, we are interested in all samples. Leave all dropdowns empty.

Step 4: X sort order

Sort samples in ascending order.

Result

After we complete the wizard, the aggregated data is in the data grid, ready for use by the chart engine.

T	Variable	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample
X	Population	0.2M	0.2M	0.2M	0.2M	3.3M	3.3M	3.3M	3.3M
Y	Crime rate	45.1	51.7	332.1	380.8	138.1	128.9	355.9	339.3
Optional	State	Alaska	Alaska	Alaska	Alaska	Alabama	Alabama	Alabama	Alabama
Optional	Year	1960	1961	1960	1961	1960	1961	1960	1961
Optional	Crime type	Assault	Assault	Burglary	Burglary	Assault	Assault	Burglary	Burglary

For more information about import techniques, see charte.ca blog.

Import flat CSV/TSV data (Scatter grouped)

This is a sample walkthrough that shows how to import comma- or tab-separated values into data grid. It shows how raw data samples are converted into data grid columns. Each step reperesents a screen of the import wizard.

Step 1: Raw data (tab-separated-values with headers)

Paste your comma- or tab-separated text data into the "raw data" field on step 1 of the import wizard.

Crime category	Crime type	State	State abbr	Year	Crime rate	Population
Violent Crime	Assault	Alaska	AK	1960	45.1	0.2M
Violent Crime	Assault	Alaska	AK	1961	51.7	0.2M
Violent Crime	Assault	Alabama	AL	1960	138.1	3.3M
Violent Crime	Assault	Alabama	AL	1961	128.9	3.3M
Property Crime	Burglary	Alaska	AK	1960	332.1	0.2M
Property Crime	Burglary	Alaska	AK	1961	380.8	0.2M
Property Crime	Burglary	Alabama	AL	1960	355.9	3.3M
Property Crime	Burglary	Alabama	AL	1961	339.3	3.3M

Step 2: Raw data columns to use

"Population" column values will be used as X axis coordinates. "Crime rate" column values will be used as Y axis coordinates. "Crime type" column values will be used for grouping. A few other columns will be used as optional variables, displayed in callouts.

Step 3: Filter

In this particular example, we are interested in all samples. Leave all dropdowns empty.

Step 4: X sort order

Sort samples in ascending order.

Result

After we complete the wizard, the aggregated data is in the data grid, ready for use by the chart engine. Please note the group coloring.

T	Variable	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample
X	Population	0.2M	0.2M	0.2M	0.2M	3.3M	3.3M	3.3M	3.3M
Y	Crime rate	45.1	51.7	332.1	380.8	138.1	128.9	355.9	339.3
Group	Crime type	Assault	Assault	Burglary	Burglary	Assault	Assault	Burglary	Burglary
Optional	State	Alaska	Alaska	Alaska	Alaska	Alabama	Alabama	Alabama	Alabama
Optional	Year	1960	1961	1960	1961	1960	1961	1960	1961

For more information about import techniques, see charte.ca blog.

Import flat CSV/TSV data (Bubble regular)

This is a sample walkthrough that shows how to import comma- or tab-separated values into data grid. It shows how raw data samples are converted into data grid columns. Each step reperesents a screen of the import wizard.

Step 1: Raw data (tab-separated-values with headers)

Paste your comma- or tab-separated text data into the "raw data" field on step 1 of the import wizard.

Symbol	Company	Cap(billions)	P/E	Yield	Sector
KO	Coca-Cola	186.72	25	3.22	Consumer
PEP	Pepsi	154.55	30.32	2.8	Consumer
GM	GM	48.92	4.04	4.82	Consumer
F	Ford	49.97	5.52	4.84	Consumer
JPM	JP Morgan Chase	239.33	11.2	2.9	Financial
C	Citi	136.44	9.88	1.36	Financial
MS	Morgan Stanley	59.69	14.29	2.57	Financial
GS	Goldman Sachs	67.54	15.7	1.57	Financial
MSFT	Microsoft	453.92	27.61	2.48	Technology
AAPL	Apple	573.79	12.49	2.13	Technology
SAP	SAP	107.1	26.02	1.5	Technology
ORCL	Oracle	170.23	19.91	1.45	Technology

Step 2: Raw data columns to use

"P/E" column values will be used as X axis coordinates. "Yield" column values will be used as Y axis coordinates. "Cap(billions)" column values will be used as Z coordinates (circle size). "Symbol" column values will be used as bubble labels. A few other columns will be used as optional variables, displayed in callouts.

Step 3: Filter

In this particular example, we are interested in all samples. Leave all dropdowns empty.

Step 4: X sort order

Sort samples in ascending order.

Result

After we complete the wizard, the aggregated data is in the data grid, ready for use by the chart engine.

T	Variable	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample
Label	Symbol	GM	F	C	JPM	AAPL	MS	GS	ORCL	KO	SAP	MSFT	PEP
x	P/E	4.04	5.52	9.88	11.2	12.49	14.29	15.7	19.91	25	26.02	27.61	30.32
y	Yield	4.82	4.84	1.36	2.9	2.13	2.57	1.57	1.45	3.22	1.5	2.48	2.8
z	Cap(billions)	48.92	49.97	136.44	239.33	573.79	59.69	67.54	170.23	186.72	107.1	453.92	154.55
Optional	Company	GM	Ford	Citi	JPMorgan Chase	Apple	Morgan Stanley	Goldman Sachs	Oracle	Coca-Cola	SAP	Microsoft	Pepsi
Optional	Sector	Consumer	Consumer	Financial	Financial	Technology	Financial	Financial	Technology	Consumer	Technology	Technology	Consumer

For more information about import techniques, see charte.ca blog.

Import flat CSV/TSV data (Comparative histogram)

This is a sample walkthrough that shows how to import comma- or tab-separated values into data grid. It uses the same technique as Excel pivot table does. Each step reperesents a screen of the import wizard.

Step 1: Raw data (tab-separated-values with headers)

Paste your comma- or tab-separated text data into the "raw data" field on step 1 of the import wizard.

Year	Sex	Age	Value
2015	Male	0 - 4	10177601
2015	Male	5 - 9	10459132
2015	Male	10 - 14	10520388
2015	Male	15 - 19	10797867
2015	Male	20 - 24	11667854
2015	Male	25 - 29	11409399
2015	Male	30 - 34	10889739
2015	Male	35 - 39	10173424
2015	Male	40 - 44	10030153
2015	Male	45 - 49	10334929
2015	Male	50 - 54	10963847
2015	Male	55 - 59	10597567
2015	Male	60 - 64	9117180
2015	Male	65 - 69	7596190
2015	Male	70 - 74	5296158
2015	Male	75 - 79	3610906
2015	Male	80 - 84	2412665
2015	Male	85 - 89	1442244
2015	Male	90 - 94	588978
2015	Male	95 - 99	127988
2015	Male	100 +	15088
2015	Female	0 - 4	9729680
2015	Female	5 - 9	10028044
2015	Female	10 - 14	10101942
2015	Female	15 - 19	10311036
2015	Female	20 - 24	11071459
2015	Female	25 - 29	11052155
2015	Female	30 - 34	10785909
2015	Female	35 - 39	10201161
2015	Female	40 - 44	10185045
2015	Female	45 - 49	10518915
2015	Female	50 - 54	11370470
2015	Female	55 - 59	11210375
2015	Female	60 - 64	9952697
2015	Female	65 - 69	8471278
2015	Female	70 - 74	6186891
2015	Female	75 - 79	4512927
2015	Female	80 - 84	3386676
2015	Female	85 - 89	2422101
2015	Female	90 - 94	1261957
2015	Female	95 - 99	366919
2015	Female	100 +	61886
2010	Male	0 - 4	10319427
2010	Male	5 - 9	10389638
2010	Male	10 - 14	10579862
2010	Male	15 - 19	11303666
2010	Male	20 - 24	11014176
2010	Male	25 - 29	10635591
2010	Male	30 - 34	9996500
2010	Male	35 - 39	10042022
2010	Male	40 - 44	10393977
2010	Male	45 - 49	11209085
2010	Male	50 - 54	10933274
2010	Male	55 - 59	9523648
2010	Male	60 - 64	8077500
2010	Male	65 - 69	5852547
2010	Male	70 - 74	4243972
2010	Male	75 - 79	3182388
2010	Male	80 - 84	2294374
2010	Male	85 - 89	1273867
2010	Male	90 - 94	424387
2010	Male	95 - 99	82263
2010	Male	100 +	9162
2010	Female	0 - 4	9881935
2010	Female	5 - 9	9959019
2010	Female	10 - 14	10097332
2010	Female	15 - 19	10736677
2010	Female	20 - 24	10571823
2010	Female	25 - 29	10466258
2010	Female	30 - 34	9965599
2010	Female	35 - 39	10137620
2010	Female	40 - 44	10496987
2010	Female	45 - 49	11499506
2010	Female	50 - 54	11364851
2010	Female	55 - 59	10141157
2010	Female	60 - 64	8740424
2010	Female	65 - 69	6582716
2010	Female	70 - 74	5034194
2010	Female	75 - 79	4135407
2010	Female	80 - 84	3448953
2010	Female	85 - 89	2346592
2010	Female	90 - 94	1023979
2010	Female	95 - 99	288981
2010	Female	100 +	44202
2005	Male	0 - 4	10381346
2005	Male	5 - 9	9993397
2005	Male	10 - 14	10681835
2005	Male	15 - 19	10790223
2005	Male	20 - 24	10856936
2005	Male	25 - 29	10268169
2005	Male	30 - 34	10153091
2005	Male	35 - 39	10563375
2005	Male	40 - 44	11376664
2005	Male	45 - 49	11106575
2005	Male	50 - 54	9788780
2005	Male	55 - 59	8425070
2005	Male	60 - 64	6201648
2005	Male	65 - 69	4721791
2005	Male	70 - 74	3807605
2005	Male	75 - 79	3117774
2005	Male	80 - 84	2161671
2005	Male	85 - 89	1092012
2005	Male	90 - 94	404657
2005	Male	95 - 99	93114
2005	Male	100 +	14013
2005	Female	0 - 4	9922378
2005	Female	5 - 9	9545396
2005	Female	10 - 14	10175908
2005	Female	15 - 19	10248766
2005	Female	20 - 24	10180924
2005	Female	25 - 29	9797533
2005	Female	30 - 34	9924119
2005	Female	35 - 39	10438579
2005	Female	40 - 44	11483846
2005	Female	45 - 49	11377948
2005	Female	50 - 54	10208962
2005	Female	55 - 59	8928608
2005	Female	60 - 64	6800215
2005	Female	65 - 69	5409653
2005	Female	70 - 74	4700764
2005	Female	75 - 79	4294039
2005	Female	80 - 84	3480878
2005	Female	85 - 89	2118491
2005	Female	90 - 94	1010281
2005	Female	95 - 99	307279
2005	Female	100 +	56091
2000	Male	0 - 4	9810733
2000	Male	5 - 9	10523277
2000	Male	10 - 14	10520197
2000	Male	15 - 19	10391004
2000	Male	20 - 24	9687814
2000	Male	25 - 29	9798760
2000	Male	30 - 34	10321769
2000	Male	35 - 39	11318696
2000	Male	40 - 44	11129102
2000	Male	45 - 49	9889506
2000	Male	50 - 54	8607724
2000	Male	55 - 59	6508729
2000	Male	60 - 64	5136627
2000	Male	65 - 69	4400362
2000	Male	70 - 74	3902912
2000	Male	75 - 79	3044456
2000	Male	80 - 84	1834897
2000	Male	85 - 89	876501
2000	Male	90 - 94	282325
2000	Male	95 - 99	58115
2000	Male	100 +	10057
2000	Female	0 - 4	9365065
2000	Female	5 - 9	10026228
2000	Female	10 - 14	10007875
2000	Female	15 - 19	9828886
2000	Female	20 - 24	9276187
2000	Female	25 - 29	9582576
2000	Female	30 - 34	10188619
2000	Female	35 - 39	11387968
2000	Female	40 - 44	11312761
2000	Female	45 - 49	10202898
2000	Female	50 - 54	8977824
2000	Female	55 - 59	6960508
2000	Female	60 - 64	5668820
2000	Female	65 - 69	5133183
2000	Female	70 - 74	4954529
2000	Female	75 - 79	4371357
2000	Female	80 - 84	3110470
2000	Female	85 - 89	1913317
2000	Female	90 - 94	830206
2000	Female	95 - 99	228669
2000	Female	100 +	40397

Step 2: Raw data columns to use

"State" column values (Alaska, Alabama) will be used for series names. "Year" column values (1960,1961) will be used for category names. "Crime rate" column values will be used for series/category intersection cells.

Step 3: Filter

In this particular example, we are interested in all samples. Leave all dropdowns empty.

Step 4 : aggregate function

Comparative histogram import does not support aggregation.

Step 5: Sort order

Sort series and categories in ascending order.

Result

After we complete the wizard, the aggregated data is in the data grid, ready for use by the chart engine.

T	Category	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series
Label (series)		Female	Female	Female	Female	Female	Female	Female	Female	Female	Female	Female	Female	Female	Female	Female	Female	Female	Female	Female	Female	Female	Male	Male	Male	Male	Male	Male	Male	Male	Male	Male	Male	Male	Male	Male	Male	Male	Male	Male	Male	Male	Male
Label (sub-series)		0 - 4	5 - 9	10 - 14	15 - 19	20 - 24	25 - 29	30 - 34	35 - 39	40 - 44	45 - 49	50 - 54	55 - 59	60 - 64	65 - 69	70 - 74	75 - 79	80 - 84	85 - 89	90 - 94	95 - 99	100 +	0 - 4	5 - 9	10 - 14	15 - 19	20 - 24	25 - 29	30 - 34	35 - 39	40 - 44	45 - 49	50 - 54	55 - 59	60 - 64	65 - 69	70 - 74	75 - 79	80 - 84	85 - 89	90 - 94	95 - 99	100 +
Value	2000	9365065	10026228	10007875	9828886	9276187	9582576	10188619	11387968	11312761	10202898	8977824	6960508	5668820	5133183	4954529	4371357	3110470	1913317	830206	228669	40397	9810733	10523277	10520197	10391004	9687814	9798760	10321769	11318696	11129102	9889506	8607724	6508729	5136627	4400362	3902912	3044456	1834897	876501	282325	58115	10057
Value	2005	9922378	9545396	10175908	10248766	10180924	9797533	9924119	10438579	11483846	11377948	10208962	8928608	6800215	5409653	4700764	4294039	3480878	2118491	1010281	307279	56091	10381346	9993397	10681835	10790223	10856936	10268169	10153091	10563375	11376664	11106575	9788780	8425070	6201648	4721791	3807605	3117774	2161671	1092012	404657	93114	14013
Value	2010	9881935	9959019	10097332	10736677	10571823	10466258	9965599	10137620	10496987	11499506	11364851	10141157	8740424	6582716	5034194	4135407	3448953	2346592	1023979	288981	44202	10319427	10389638	10579862	11303666	11014176	10635591	9996500	10042022	10393977	11209085	10933274	9523648	8077500	5852547	4243972	3182388	2294374	1273867	424387	82263	9162
Value	2015	9729680	10028044	10101942	10311036	11071459	11052155	10785909	10201161	10185045	10518915	11370470	11210375	9952697	8471278	6186891	4512927	3386676	2422101	1261957	366919	61886	10177601	10459132	10520388	10797867	11667854	11409399	10889739	10173424	10030153	10334929	10963847	10597567	9117180	7596190	5296158	3610906	2412665	1442244	588978	127988	15088

For more information about import techniques, see charte.ca blog.

Import flat CSV/TSV data (Bubble grouped)

This is a sample walkthrough that shows how to import comma- or tab-separated values into data grid. It shows how raw data samples are converted into data grid columns. Each step reperesents a screen of the import wizard.

Step 1: Raw data (tab-separated-values with headers)

Paste your comma- or tab-separated text data into the "raw data" field on step 1 of the import wizard.

Symbol	Company	Cap(billions)	P/E	Yield	Sector
KO	Coca-Cola	186.72	25	3.22	Consumer
PEP	Pepsi	154.55	30.32	2.8	Consumer
GM	GM	48.92	4.04	4.82	Consumer
F	Ford	49.97	5.52	4.84	Consumer
JPM	JP Morgan Chase	239.33	11.2	2.9	Financial
C	Citi	136.44	9.88	1.36	Financial
MS	Morgan Stanley	59.69	14.29	2.57	Financial
GS	Goldman Sachs	67.54	15.7	1.57	Financial
MSFT	Microsoft	453.92	27.61	2.48	Technology
AAPL	Apple	573.79	12.49	2.13	Technology
SAP	SAP	107.1	26.02	1.5	Technology
ORCL	Oracle	170.23	19.91	1.45	Technology

Step 2: Raw data columns to use

"P/E" column values will be used as X axis coordinates. "Yield" column values will be used as Y axis coordinates. "Cap(billions)" column values will be used as Z coordinates (circle size). "Symbol" column values will be used as bubble labels. "Sector" column values will be used for grouping. Other columns may be used as optional variables, displayed in callouts.

Step 3: Filter

In this particular example, we are interested in all samples. Leave all dropdowns empty.

Step 4: X sort order

Sort samples in ascending order.

Result

After we complete the wizard, the aggregated data is in the data grid, ready for use by the chart engine. Please note the group coloring.

T	Variable	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample	Sample
Label	Symbol	GM	F	C	JPM	AAPL	MS	GS	ORCL	KO	SAP	MSFT	PEP
x	P/E	4.04	5.52	9.88	11.2	12.49	14.29	15.7	19.91	25	26.02	27.61	30.32
y	Yield	4.82	4.84	1.36	2.9	2.13	2.57	1.57	1.45	3.22	1.5	2.48	2.8
z	Cap(billions)	48.92	49.97	136.44	239.33	573.79	59.69	67.54	170.23	186.72	107.1	453.92	154.55
Group	Sector	Consumer	Consumer	Financial	Financial	Technology	Financial	Financial	Technology	Consumer	Technology	Technology	Consumer
Optional	Company	GM	Ford	Citi	JPMorgan Chase	Apple	Morgan Stanley	Goldman Sachs	Oracle	Coca-Cola	SAP	Microsoft	Pepsi

For more information about import techniques, see charte.ca blog.

Import flat CSV/TSV data (Motion)

This is a sample walkthrough that shows how to import comma- or tab-separated values into data grid. It shows how raw data samples are converted into data grid columns. Each step reperesents a screen of the import wizard.

Step 1: Raw data (tab-separated-values with headers)

Paste your comma- or tab-separated text data into the "raw data" field on step 1 of the import wizard.

Year	Region	Region abbreviation	Outflow	Inflow	Population	Timezone
1911	Atlantic	ATL	7.8	3.1	937,955	Atlantic/Newfoundland
1911	Quebec	QC	5.8	1.5	2,005,776	Eastern
1911	Ontario	ON	13.3	3.9	2,527,292	Eastern
1911	Manitoba	MB	17.9	34.4	461,394	Central
1911	Saskatchewan	SK	5.8	57.9	492,432	Central
1911	Alberta	AB	6.1	54.0	374,295	Mountain
1911	British Columbia	BC	3.9	49.6	392,480	Pacific
1921	Atlantic	ATL	9.5	4.1	1,000,328	Atlantic/Newfoundland
1921	Quebec	QC	6.4	2.1	2,361,199	Eastern
1921	Ontario	ON	13.2	4.7	2,933,622	Eastern
1921	Manitoba	MB	17.1	24.7	610,118	Central
1921	Saskatchewan	SK	8.6	37.0	757,510	Central
1921	Alberta	AB	8.1	38.0	588,454	Mountain
1921	British Columbia	BC	6.1	40.3	524,582	Pacific
1931	Atlantic	ATL	11.1	4.5	1,009,103	Atlantic/Newfoundland
1931	Quebec	QC	5.7	3.0	2,874,662	Eastern
1931	Ontario	ON	11.3	5.5	3,431,683	Eastern
1931	Manitoba	MB	19.4	19.3	700,139	Central
1931	Saskatchewan	SK	11.9	26.6	921,785	Central
1931	Alberta	AB	10.8	29.4	731,605	Mountain
1931	British Columbia	BC	5.9	37.6	694,263	Pacific
1941	Atlantic	ATL	11.0	4.9	1,130,410	Atlantic/Newfoundland
1941	Quebec	QC	5.0	3.5	3,331,882	Eastern
1941	Ontario	ON	9.2	7.1	3,787,655	Eastern
1941	Manitoba	MB	21.4	16.4	729,744	Central
1941	Saskatchewan	SK	20.4	19.0	895,992	Central
1941	Alberta	AB	13.5	22.9	796,169	Mountain
1941	British Columbia	BC	5.9	38.5	817,861	Pacific
1951	Atlantic	ATL	15.1	6.3	1,618,126	Atlantic/Newfoundland
1951	Quebec	QC	5.6	4.2	4,055,681	Eastern
1951	Ontario	ON	8.4	10.9	4,597,542	Eastern
1951	Manitoba	MB	27.0	16.0	776,541	Central
1951	Saskatchewan	SK	32.8	16.3	831,728	Central
1951	Alberta	AB	18.6	24.4	939,501	Mountain
1951	British Columbia	BC	9.3	43.5	1,165,210	Pacific
1961	Atlantic	ATL	18.6	8.1	1,897,425	Atlantic/Newfoundland
1961	Quebec	QC	5.5	4.6	5,259,211	Eastern
1961	Ontario	ON	7.8	11.8	6,236,092	Eastern
1961	Manitoba	MB	28.0	15.8	921,686	Central
1961	Saskatchewan	SK	35.5	14.3	925,181	Central
1961	Alberta	AB	18.4	24.5	1,331,944	Mountain
1961	British Columbia	BC	9.8	36.9	1,629,082	Pacific
1971	Atlantic	ATL	22.9	9.7	2,083,210	Atlantic/Newfoundland
1971	Quebec	QC	6.2	4.6	6,137,305	Eastern
1971	Ontario	ON	7.5	13.1	7,849,027	Eastern
1971	Manitoba	MB	30.6	16.1	998,876	Central
1971	Saskatchewan	SK	40.0	13.0	932,038	Central
1971	Alberta	AB	20.4	25.5	1,665,717	Mountain
1971	British Columbia	BC	9.8	37.4	2,240,470	Pacific
1981	Atlantic	ATL	24.8	11.6	2,260,162	Atlantic/Newfoundland
1981	Quebec	QC	7.8	4.1	6,547,207	Eastern
1981	Ontario	ON	10.1	13.3	8,812,286	Eastern
1981	Manitoba	MB	33.8	16.2	1,035,545	Central
1981	Saskatchewan	SK	41.8	14.5	975,759	Central
1981	Alberta	AB	20.8	35.3	2,291,104	Mountain
1981	British Columbia	BC	11.6	39.7	2,826,558	Pacific
1991	Atlantic	ATL	26.2	12.9	2,370,549	Atlantic/Newfoundland
1991	Quebec	QC	8.0	4.1	7,067,396	Eastern
1991	Ontario	ON	9.3	13.3	10,431,316	Eastern
1991	Manitoba	MB	32.2	15.7	1,109,604	Central
1991	Saskatchewan	SK	41.1	13.4	1,002,713	Central
1991	Alberta	AB	21.4	31.7	2,592,306	Mountain
1991	British Columbia	BC	11.8	36.7	3,373,787	Pacific
2001	Atlantic	ATL	27.3	13.6	2,341,021	Atlantic/Newfoundland
2001	Quebec	QC	7.9	3.8	7,396,415	Eastern
2001	Ontario	ON	9.3	11.9	11,897,370	Eastern
2001	Manitoba	MB	31.3	14.9	1,151,450	Central
2001	Saskatchewan	SK	40.5	13.6	1,000,239	Central
2001	Alberta	AB	19.6	32.4	3,058,084	Mountain
2001	British Columbia	BC	12.0	33.6	4,076,881	Pacific
2011	Atlantic	ATL	28.9	15.6	2,369,074	Atlantic/Newfoundland
2011	Quebec	QC	7.5	4.0	8,007,656	Eastern
2011	Ontario	ON	9.5	10.8	13,263,544	Eastern
2011	Manitoba	MB	30.5	14.5	1,233,728	Central
2011	Saskatchewan	SK	38.9	15.6	1,066,349	Central
2011	Alberta	AB	19.1	33.0	3,790,191	Mountain
2011	British Columbia	BC	13.2	31.0	4,499,139	Pacific

Step 2: Raw data columns to use

"P/E" column values will be used as X axis coordinates. "Yield" column values will be used as Y axis coordinates. "Cap(billions)" column values will be used as Z coordinates (circle size). "Symbol" column values will be used as bubble labels. "Sector" column values will be used for grouping. Other columns may be used as optional variables, displayed in callouts.

Step 3: Filter

In this particular example, we are interested in all samples. Leave all dropdowns empty.

Step 4 : aggregate function

No aggregation supported for motion chart import.

Step 5: sort order

Leave categories and series unordered

Result

After we complete the wizard, the aggregated data is in the data grid, ready for use by the chart engine.

T	Category	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series	Series
Label (series)		AB	AB	AB	AB	AB	ATL	ATL	ATL	ATL	ATL	BC	BC	BC	BC	BC	MB	MB	MB	MB	MB	ON	ON	ON	ON	ON	QC	QC	QC	QC	QC	SK	SK	SK	SK	SK
Label (x,y,z,optionals)		Outflow	Inflow	Population	Region	Timezone	Outflow	Inflow	Population	Region	Timezone	Outflow	Inflow	Population	Region	Timezone	Outflow	Inflow	Population	Region	Timezone	Outflow	Inflow	Population	Region	Timezone	Outflow	Inflow	Population	Region	Timezone	Outflow	Inflow	Population	Region	Timezone
Value	1911	6.1	54.0	374,295	Alberta	Mountain	7.8	3.1	937,955	Atlantic	Atlantic/Newfoundland	3.9	49.6	392,480	British Columbia	Pacific	17.9	34.4	461,394	Manitoba	Central	13.3	3.9	2,527,292	Ontario	Eastern	5.8	1.5	2,005,776	Quebec	Eastern	5.8	57.9	492,432	Saskatchewan	Central
Value	1921	8.1	38.0	588,454	Alberta	Mountain	9.5	4.1	1,000,328	Atlantic	Atlantic/Newfoundland	6.1	40.3	524,582	British Columbia	Pacific	17.1	24.7	610,118	Manitoba	Central	13.2	4.7	2,933,622	Ontario	Eastern	6.4	2.1	2,361,199	Quebec	Eastern	8.6	37.0	757,510	Saskatchewan	Central
Value	1931	10.8	29.4	731,605	Alberta	Mountain	11.1	4.5	1,009,103	Atlantic	Atlantic/Newfoundland	5.9	37.6	694,263	British Columbia	Pacific	19.4	19.3	700,139	Manitoba	Central	11.3	5.5	3,431,683	Ontario	Eastern	5.7	3.0	2,874,662	Quebec	Eastern	11.9	26.6	921,785	Saskatchewan	Central
Value	1941	13.5	22.9	796,169	Alberta	Mountain	11.0	4.9	1,130,410	Atlantic	Atlantic/Newfoundland	5.9	38.5	817,861	British Columbia	Pacific	21.4	16.4	729,744	Manitoba	Central	9.2	7.1	3,787,655	Ontario	Eastern	5.0	3.5	3,331,882	Quebec	Eastern	20.4	19.0	895,992	Saskatchewan	Central
Value	1951	18.6	24.4	939,501	Alberta	Mountain	15.1	6.3	1,618,126	Atlantic	Atlantic/Newfoundland	9.3	43.5	1,165,210	British Columbia	Pacific	27.0	16.0	776,541	Manitoba	Central	8.4	10.9	4,597,542	Ontario	Eastern	5.6	4.2	4,055,681	Quebec	Eastern	32.8	16.3	831,728	Saskatchewan	Central
Value	1961	18.4	24.5	1,331,944	Alberta	Mountain	18.6	8.1	1,897,425	Atlantic	Atlantic/Newfoundland	9.8	36.9	1,629,082	British Columbia	Pacific	28.0	15.8	921,686	Manitoba	Central	7.8	11.8	6,236,092	Ontario	Eastern	5.5	4.6	5,259,211	Quebec	Eastern	35.5	14.3	925,181	Saskatchewan	Central
Value	1971	20.4	25.5	1,665,717	Alberta	Mountain	22.9	9.7	2,083,210	Atlantic	Atlantic/Newfoundland	9.8	37.4	2,240,470	British Columbia	Pacific	30.6	16.1	998,876	Manitoba	Central	7.5	13.1	7,849,027	Ontario	Eastern	6.2	4.6	6,137,305	Quebec	Eastern	40.0	13.0	932,038	Saskatchewan	Central
Value	1981	20.8	35.3	2,291,104	Alberta	Mountain	24.8	11.6	2,260,162	Atlantic	Atlantic/Newfoundland	11.6	39.7	2,826,558	British Columbia	Pacific	33.8	16.2	1,035,545	Manitoba	Central	10.1	13.3	8,812,286	Ontario	Eastern	7.8	4.1	6,547,207	Quebec	Eastern	41.8	14.5	975,759	Saskatchewan	Central
Value	1991	21.4	31.7	2,592,306	Alberta	Mountain	26.2	12.9	2,370,549	Atlantic	Atlantic/Newfoundland	11.8	36.7	3,373,787	British Columbia	Pacific	32.2	15.7	1,109,604	Manitoba	Central	9.3	13.3	10,431,316	Ontario	Eastern	8.0	4.1	7,067,396	Quebec	Eastern	41.1	13.4	1,002,713	Saskatchewan	Central
Value	2001	19.6	32.4	3,058,084	Alberta	Mountain	27.3	13.6	2,341,021	Atlantic	Atlantic/Newfoundland	12.0	33.6	4,076,881	British Columbia	Pacific	31.3	14.9	1,151,450	Manitoba	Central	9.3	11.9	11,897,370	Ontario	Eastern	7.9	3.8	7,396,415	Quebec	Eastern	40.5	13.6	1,000,239	Saskatchewan	Central
Value	2011	19.1	33.0	3,790,191	Alberta	Mountain	28.9	15.6	2,369,074	Atlantic	Atlantic/Newfoundland	13.2	31.0	4,499,139	British Columbia	Pacific	30.5	14.5	1,233,728	Manitoba	Central	9.5	10.8	13,263,544	Ontario	Eastern	7.5	4.0	8,007,656	Quebec	Eastern	38.9	15.6	1,066,349	Saskatchewan	Central

For more information about import techniques, see charte.ca blog.

Import flat CSV/TSV data (XY Heatmap, single category)

This is a sample walkthrough that shows how to import comma- or tab-separated values into data grid. It shows how raw data samples are converted into data grid columns. Each step reperesents a screen of the import wizard.

Step 1: Raw data (tab-separated-values with headers)

Paste your comma- or tab-separated text data into the "raw data" field on step 1 of the import wizard.

year	weekday	time
2015	Monday	09:00-10:00
2015	Monday	18:00-19:00
2015	Monday	21:00-22:00
2015	Monday	23:00-24:00
...	...	...

Step 2: Raw data columns to use

"weekday" column values will be used as X axis coordinates. "time" column values will be used as Y axis coordinates. For this particular example, select NONE for value column - we will be using COUNT aggregate function.

Step 3: Filter

In this particular example, we are interested in all samples. Leave all dropdowns empty.

Step 4 : aggregate function

In this particular example, select COUNT, as we are interested in the number of incidents that occurred any year, at specified weekday, at specified time.

Step 5: sort order

Set Y sort order to "asc" - we want it to be ordered alphabetically. For X axis, set "none" - it will guarantee that weekdays will keep the order they appear in the source CSV data.

Result

After we complete the wizard, the aggregated data is in the data grid, ready for use by the chart engine.

T	y	value	value	value	...
x		Monday	Tuesday	Wednesday	...
value	00:00-01:00	567	489	543	...
value	01:00-02:00	365	320	377	...
value	02:00-03:00	268	301	245	...
...	...	...	...	...	...

For more information about import techniques, see charte.ca blog.

Import flat CSV/TSV data (XY Heatmap, multiple categories)

This is a sample walkthrough that shows how to import comma- or tab-separated values into data grid. It shows how raw data samples are converted into data grid columns. Each step reperesents a screen of the import wizard.

Step 1: Raw data (tab-separated-values with headers)

Paste your comma- or tab-separated text data into the "raw data" field on step 1 of the import wizard.

year	weekday	time
2015	Monday	09:00-10:00
2015	Monday	18:00-19:00
2015	Monday	21:00-22:00
2015	Monday	23:00-24:00
...	...	...

Step 2: Raw data columns to use

"year" column values will be used as categories (radio buttons). "weekday" column values will be used as X axis coordinates. "time" column values will be used as Y axis coordinates. For this particular example, select NONE for value column - we will be using COUNT aggregate function.

Step 3: Filter

In this particular example, we are interested in all samples. Leave all dropdowns empty.

Step 4 : aggregate function

In this particular example, select COUNT, as we are interested in the number of incidents that occurred durung specified year, at specified weekday, at specified time.

Step 5: sort order

Set Y and category sort order to "asc" - we want them to be ordered alphabetically. For X axis, set "none" - it will guarantee that weekdays will keep the order they appear in the source CSV data.

Result

After we complete the wizard, the aggregated data is in the data grid, ready for use by the chart engine.

T	Category	Point	Point	Point	...
x		Monday	Monday	Monday	...
y		00:00-01:00	01:00-02:00	02:00-03:00	...
value	2003	85	57	47	...
value	2004	93	50	38	...
value	...	...	...	...	...

For more information about import techniques, see charte.ca blog.

Background SVG content

You can provide your own SVG background content.

It is recommended to:

set your SVG snippet size (the viewBox attribute) so it has the same width/height ration as your chart (or your chart's grid area, if you choose "Grid" for "Background SVG container"); for example, if your chart (or grid area) dimension is 800x500, the SVG for your background can have viewBox="0 0 400 250"
set your SVG snippet's preserveAspectRatio="none", and width="100%" height="100%", so your SVG content will be stretched to your chart dimensions (or grid dimensions, if you choose "Grid" for "Background SVG container")

Please note that your background SVG content must be valid, otherwise your chart will not render properly.

Check out examples below, you can copy-and-paste them to the "Background SVG content" field and see what it looks like on your chart.

Sample image (size 626x626):

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" version="1.1" preserveAspectRatio="none" viewBox="0 0 626 626">
  <image xlink:href="https://image.freepik.com/free-vector/blue-abstract-background-with-mandalas_1159-956.jpg" height="626px" width="626px"/>
</svg>

Sample SVG drawing (size 640x480):

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" version="1.1" preserveAspectRatio="none" viewBox="0 0 640 480">
  <rect x="0" y="0" width="640" height="480" rx="0" ry="0" fill="#80F080" opacity="1"/>
  <path d="M0,480 L640,480 L640,0 Z" fill="#F08080" opacity="1"/>
  <text x="120" y="130" fill="#20A020" font-family="Tahoma" font-size="38px">Green area</text>
  <text x="430" y="300" fill="#A02020" font-family="Tahoma" font-size="38px">Red area</text>
</svg>

Sample SVG animation (size 735x600, source: https://upload.wikimedia.org/wikipedia/commons/0/06/Retro-flower-icon-5petals.svg):

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 735 600">
<defs>
  <g id="f1">
    <path transform="translate(206,212) scale(0.242,-0.242)" fill="#11a533" d="M201.479,585.379 C206.197,602.986,208.586,621.136,208.586,639.365 C208.586,754.564,115.199,847.951,0,847.951 C-115.199,847.951,-208.586,754.564,-208.586,639.365 C-208.586,621.136,-206.197,602.986,-201.479,585.379 L-95.9868,191.676 C-95.1387,188.51,-94.709,185.247,-94.709,181.97 C-94.709,161.26,-111.499,144.47,-132.209,144.47 C-139.458,144.47,-146.553,146.572,-152.633,150.52 L-494.468,372.51 C-528.287,394.472,-567.748,406.161,-608.072,406.161 C-723.271,406.161,-816.659,312.773,-816.659,197.574 C-816.659,86.6179,-729.793,-4.91895,-618.989,-10.7258 L-211.956,-32.0579 C-192.036,-33.1016,-176.419,-49.5586,-176.419,-69.5063 C-176.419,-80.8201,-181.527,-91.5293,-190.319,-98.6494 L-507.077,-355.155 C-555.983,-394.759,-584.396,-454.326,-584.396,-517.257 C-584.396,-632.456,-491.008,-725.844,-375.809,-725.844 C-289.452,-725.844,-212.024,-672.629,-181.077,-592.008 L-35.009,-211.489 C-29.4453,-196.995,-15.5251,-187.427,0,-187.427 C15.5251,-187.427,29.4453,-196.995,35.009,-211.489 L181.077,-592.008 C212.024,-672.629,289.452,-725.844,375.809,-725.844 C491.008,-725.844,584.396,-632.456,584.396,-517.257 C584.396,-454.326,555.983,-394.759,507.077,-355.155 L190.319,-98.6494 C181.527,-91.5293,176.419,-80.8201,176.419,-69.5063 C176.419,-49.5586,192.036,-33.1016,211.956,-32.0579 L618.989,-10.7258 C729.793,-4.91895,816.659,86.6179,816.659,197.574 C816.659,312.773,723.271,406.161,608.072,406.161 C567.748,406.161,528.287,394.472,494.468,372.51 L152.633,150.52 C146.553,146.572,139.458,144.47,132.209,144.47 C111.499,144.47,94.709,161.26,94.709,181.97 C94.709,185.247,95.1387,188.51,95.9868,191.676 L201.479,585.379Z M60,0 C60,-33.137,33.137,-60,0,-60 C-33.137,-60,-60,-33.137,-60,0 C-60,33.137,-33.137,60,0,60 C33.137,60,60,33.137,60,0Z"/>
  </g>
  <g id="f2">
    <path transform="translate(572,167) scale(0.185,-0.185)" fill="#1155f5" d="M-835.178,190.487 C-835.178,354.392,-682.808,463.661,-518.279,463.661 C-446.082,463.661,-365.733,443.286,-283.066,389.606 C-293.48,428.482,-300.233,470.17,-300.233,511.531 C-300.233,713.924,-155.608,865.543,0,865.543 C155.608,865.543,300.233,713.924,300.233,511.531 C300.233,470.17,293.48,428.482,283.066,389.606 C365.733,443.286,446.082,463.661,518.279,463.661 C682.808,463.661,835.178,354.392,835.178,190.487 C835.178,39.2025,702.063,-136.016,458.01,-148.816 C608.923,-271.038,619.471,-412.877,619.471,-463.72 C619.471,-624.177,513.072,-748.968,351.509,-748.968 C238.951,-748.968,77.623,-683.769,0,-481.58 C-77.623,-683.769,-238.951,-748.968,-351.509,-748.968 C-513.072,-748.968,-619.471,-624.177,-619.471,-463.72 C-619.471,-412.877,-608.923,-271.038,-458.01,-148.816 C-702.063,-136.016,-835.178,39.2025,-835.178,190.487Z M-241.442,0 C-241.442,-133.345,-133.345,-241.442,0,-241.442 C133.345,-241.442,241.442,-133.345,241.442,0 C241.442,133.345,133.345,241.442,0,241.442 C-133.345,241.442,-241.442,133.345,-241.442,0Z"/>
  </g>
  <g id="f3">
    <path transform="translate(468,456) scale(0.158,-0.158)" fill="#f5a533" d="M-966.219,0 C-966.219,155.608,-814.6,300.233,-612.207,300.233 C-570.846,300.233,-529.158,293.48,-490.283,283.066 C-563.875,360.688,-620.055,458.892,-620.055,573.794 C-620.055,742.173,-509.134,870.76,-352.786,870.76 C-207.156,870.76,-54.7822,756.352,0,566.13 C54.7822,756.352,207.156,870.76,352.786,870.76 C509.134,870.76,620.055,742.173,620.055,573.794 C620.055,458.892,563.875,360.688,490.283,283.066 C529.158,293.48,570.846,300.233,612.207,300.233 C814.6,300.233,966.219,155.608,966.219,0 C966.219,-155.608,814.6,-300.233,612.207,-300.233 C570.846,-300.233,529.158,-293.48,490.283,-283.066 C563.875,-360.688,620.055,-458.892,620.055,-573.794 C620.055,-742.173,509.134,-870.76,352.786,-870.76 C207.156,-870.76,54.7812,-756.352,0,-566.13 C-54.7822,-756.352,-207.156,-870.76,-352.786,-870.76 C-509.134,-870.76,-620.055,-742.173,-620.055,-573.794 C-620.055,-458.892,-563.875,-360.688,-490.283,-283.066 C-529.158,-293.48,-570.846,-300.233,-612.207,-300.233 C-814.6,-300.233,-966.219,-155.608,-966.219,0Z M-269.526,0 C-269.526,-148.855,-148.855,-269.526,0,-269.526 C148.855,-269.526,269.526,-148.855,269.526,0 C269.526,148.855,148.855,269.526,0,269.526 C-148.855,269.526,-269.526,148.855,-269.526,0Z"/>
  </g>
</defs>
<use xlink:href="#f1" transform="translate(0 0) scale(1 1)">
  <animateTransform attributeName="transform" type="translate" values="0,0;100,100;0,0" keyTimes="0.0;0.5;1.0" dur="10s" repeatCount="indefinite"/> <animateTransform attributeName="transform" type="scale" values="1,1;0.5,0.5;1,1" keyTimes="0.0;0.5;1.0" dur="10s" repeatCount="indefinite" additive="sum"/>
</use>
<use xlink:href="#f2" transform="translate(0 0) scale(1 1)">
  <animateTransform attributeName="transform" type="translate" values="0,0;250,80;0,0" keyTimes="0.0;0.5;1.0" dur="10s" repeatCount="indefinite" /> <animateTransform attributeName="transform" type="scale" values="1,1;0.5,0.5;1,1" keyTimes="0.0;0.5;1.0" dur="10s" repeatCount="indefinite" additive="sum"/>
</use>
<use xlink:href="#f3" transform="translate(0 0) scale(1 1)">
  <animateTransform attributeName="transform" type="translate" values="0,0;230,225;0,0" keyTimes="0.0;0.5;1.0" dur="10s" repeatCount="indefinite" /> <animateTransform attributeName="transform" type="scale" values="1,1;0.5,0.5;1,1" keyTimes="0.0;0.5;1.0" dur="10s" repeatCount="indefinite" additive="sum"/>
</use>
</svg>

For full SVG reference, see: Documentation by Mozilla.

Note: Internet Explorer does not support SVG background feature due to IE bug. Edge supports SVG backgrounds without limitations.

For more information about SVG backgrounds, see charte.ca blog.

Browser requirements

In order to edit or view charte.ca charts, you browser must support Javascript ES6 features. If you end up here, chances are youyr browser does not support ES6. Consider using a moder browser.

Sharing

charte.ca editor allows you to share charts with other users for editing.

To share a chart with another user, click "Share with another user" button on the "Sharing" panel. In the popup, you will be presented with an invitation link that you have to pass to the target user. After the user clicks on this link, this chart will appear in his/her "Charts" / "Shared with me" chart list.

To stop sharing a chart with a user, or to cancel your invitation, click "delete" button right from the user name/link in the shared user list.

If you do not want to see the chart that was shared with you in your "Shared with me" list, click on that chart's "delete" icon on the "Shared with me" screen.

If someone shared a chart with you, you can edit the chart and save your edits, but you cannot:

delete it
publish or unpublish it
see the list of users this chart is shared with
use integration API for this chart

Read more about sharing in charte.ca blog.