Back

Facet Chart - stacked area fill, markers, custom line colors, custom line width, smoothing, one level

Stacked area chart with eight series. Each 'series' can be customized separately, including 'fillColor' and other properties. Stack type set to 'normal', which means that series are stacked cumulatively (unlike zero-based or proportional). Note the tooltip, which displays all series values for the category on mouseover.

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML 
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

<div id="demo"></div>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 

    function success(data){
        t = new FacetChart(
            settings = {
                container: document.getElementById("demo"),
                data:{
                    preloaded: data
                },
                interaction: {resizing:{enabled:false}},
                series: [
                    {id: "s1", name: "2005", type: "line", data: {field: "2005"}, style: {smoothing: true, lineWidth: 0, fillColor: "red"}, stack: "default"}, 
                    {id: "s2", name: "2006", type: "line",  data: {field: "2006"}, style: {fillColor: "limegreen"}, stack: "default"}, 
                    {id: "s3", name: "2007", type: "line",  data: {field: "2007"}, style: {fillColor: "blue", lineColor: "blue"}, stack: "default"}, 
                    {id: "s4", name: "2008", type: "line",  data: {field: "2008"}, style: {smoothing: true, fillColor: "cyan", lineColor: "cyan"}, stack: "default"}, 
                    {id: "s5", name: "2009", type: "line",  data: {field: "2009"}, style: {fillColor: "gray", lineColor: "gray"}, stack: "default"}, 
                    {id: "s6", name: "2010", type: "line",  data: {field: "2010"}, style: {smoothing: true, fillColor: "orange", lineColor: "orange"}, stack: "default"}, 
                    {id: "s7", name: "2011", type: "line",  data: {field: "2011"}, style: {fillColor: "purple", lineColor: "purple"}, stack: "default"}, 
                    {id: "s8", name: "2012", type: "line",  data: {field: "2012"}, style: {fillColor: "yellow", lineColor: "rgb(255,120,0)", lineWidth: 5, smoothing: true, marker: {shape: "romb", width: 7, fillColor: "red"}}, stack: "default"}
                ],
                stacks: {
                    default: {type: "normal"}
                },
                facetAxis:{
                    defaultUnitWidth:8
                }
            }
        );
    }
    // using a custom library to load CSV data
    loadCSVObj("/dvsl/data/facet-chart/pc.csv", null, [
            {type: "string", name: "name"},
            {type: "decimal", name: "2005"},
            {type: "decimal", name: "2006"},
            {type: "decimal", name: "2007"},
            {type: "decimal", name: "2008"},
            {type: "decimal", name: "2009"},
            {type: "decimal", name: "2010"},
            {type: "decimal", name: "2011"},
            {type: "decimal", name: "2012"},
            {type: "string", name: "continent"}
        ], "\t",function(data){
            data = sortResponse(data, "2012", false);
            success(data);
        /* prepare preloaded data */
    });

Data

Data 
AUSTRIA	4157	4205	4246	4285	4360	4441	4513	4584	Europe
BELGIUM	4861	4929	5006	5087	5160	5279	5359	5393	Europe
DENMARK	1971	2026	2075	2105	2126	2169	2203	2240	Europe
FINLAND	2414	2489	2554	2683	2758	2858	2959	3037	Europe
FRANCE	30100	30400	30700	30850	31050	31300	31550	31600	Europe
GERMANY	46090	46570	41184	41321	41738	42302	42928	43431	Europe
GREECE	4204	4447	4821	5016	5126	5268	5254	5168	Europe
ICELAND	187	197	208	210	205	205	206	210	Europe
IRELAND	1665	1779	1883	1924	1902	1873	1850	1860	Europe
ITALY	34667	35297	35680	36105	36372	36751	37113	37078	Europe
LUXEMBOURG	307	315	322	329	332	337	346	350	Europe
NETHERLANDS	7256	7413	7597	7757	7776	8003	8100	7859	Europe
NORWAY	2029	2085	2155	2198	2243	2305	2370	2433	Europe
PORTUGAL	4200	4290	4379	4408	4457	4480	4520	4500	Europe
SPAIN	20250	21053	21760	22145	21983	22147	22277	22248	Europe
SWEDEN	4154	4202	4258	4279	4301	4335	4401	4447	Europe
SWITZERLAND	3861	3900	3956	3990	4010	4076	4163	4255	Europe
UNITED KINGDOM	30477	30817	31106	31252	31036	31258	31363	31482	Europe
BULGARIA	2538	1768	2082	2366	2502	2602	2694	2826	Europe
CYPRUS	355	373	411	444	461	463	470	475	Europe
CZECH REPUBLIC	3959	4109	4280	4423	4435	4496	4583	4699	Europe
ESTONIA	494	554	524	552	546	553	574	602	Europe
HUNGARY	2889	2954	3012	3055	3014	2984	2950	2986	Europe
LATVIA	742	822	905	933	904	637	612	618	Europe
LITHUANIA	1455	1592	1588	1671	1695	1692	1713	1753	Europe
MALTA	206	212	218	223	229	241	247	250	Europe
POLAND	12339	13384	14589	16080	16495	17240	17872	18744	Europe
ROMANIA	3364	3221	3554	4027	4245	4320	4297	4483	Europe
SLOVAKIA	1304	1334	1434	1545	1589	1669	1749	1826	Europe
SLOVENIA	960	980	1014	1045	1059	1062	1066	1070	Europe
ALBANIA	195	225	238	265	281	326	328	350	Europe
BELARUS	1840	1970	2090	2121	2340	2501	2751	2900	Europe
BOSNIA	555	579	624	673	694	725	800	850	Europe
CROATIA	1385	1436	1491	1535	1533	1515	1518	1600	Europe
GEORGIA	340	382	428	501	536	577	600	640	Europe
MACEDONIA	253	242	249	263	282	310	313	330	Europe
MOLDAVIA	293	319	339	366	386	426	448	456	Europe
RUSSIA	25570	26794	29405	32021	33084	34354	36415	38748	Europe
SERBIA	1497	1527	1491	1500	1650	1567	1678	1726	Europe
TURKEY	5773	6141	6472	6797	7094	7545	8113	8649	Europe
UKRAINE	5539	5604	5940	6394	6519	6770	6901	7300	Europe
CANADA	18124	18739	19199	19613	19877	20121	20450	20750	North America
MEXICO	14300	16412	17697	19421	20519	21153	22375	23645	North America
UNITED STATES OF AMERICA	132909	135047	135222	135882	132500	129053	127577	120902	North America
ARGENTINA	5230	5325	5745	6271	6706	7605	8269	8683	Central & South America
BAHAMAS	86	86	89	91	91	92	93	95	Central & South America
BARBADOS	72	75	77	79	80	81	82	83	Central & South America
BELIZE	12	12	12	13	13	13	14	15	Central & South America
BERMUDA	22	22	23	23	23	22	22	23	Central & South America
BOLIVIA	148	160	173	190	198	208	219	248	Central & South America
BRAZIL	18370	19446	20430	21884	23612	25541	27491	29566	Central & South America
CHILE	1450	1558	1658	1781	1858	2019	2211	2425	Central & South America
COLOMBIA	1638	1776	1914	2074	2199	2319	2506	2707	Central & South America
COSTA RICA	476	489	525	552	594	603	611	634	Central & South America
CUBA	195	197	200	202	206	210	214	219	Central & South America
DOMINICAN REPUBLIC	557	577	602	630	645	662	663	664	Central & South America
ECUADOR	530	560	590	630	670	727	790	844	Central & South America
EL SALVADOR	74	79	82	85	86	88	92	97	Central & South America
GUATEMALA	334	384	439	477	506	530	563	604	Central & South America
HAITI	37	37	36	37	35	37	38	40	Central & South America
HONDURAS	27	29	30	31	32	33	34	36	Central & South America
JAMAICA	122	127	128	133	135	137	139	141	Central & South America
NICARAGUA	100	106	115	122	101	94	94	96	Central & South America
PANAMA	273	295	318	339	355	384	389	464	Central & South America
PARAGUAY	256	267	288	332	350	363	379	400	Central & South America
PERU	748	767	795	846	890	947	1112	1268	Central & South America
PUERTO RICO	2208	2342	2421	2413	2316	2318	2500	2700	Central & South America
SURINAME	67	71	73	77	77	78	81	85	Central & South America
TRINIDAD	310	308	312	314	317	320	324	329	Central & South America
URUGUAY	466	548	574	573	600	612	625	657	Central & South America
VENEZUELA	2658	2869	3244	3826	3821	3927	3983	4300	Central & South America
AFGHANISTAN	235	338	569	618	702	773	800	870	Asia/Oceania/Middle East
AUSTRALIA	11011	11273	11519	11804	12023	12341	12714	13000	Asia/Oceania/Middle East
AZERBAIDJAN	478	552	618	710	770	816	900	980	Asia/Oceania/Middle East
BANGLADESH	281	285	288	291	314	339	367	396	Asia/Oceania/Middle East
BAHRAIN	264	310	375	453	527	545	600	650	Asia/Oceania/Middle East
BRUNEI	77	80	86	94	96	100	110	120	Asia/Oceania/Middle East
CHINA	21325	26196	31960	38389	48451	61634	74850	87376	Asia/Oceania/Middle East
GUAM	64	63	65	69	69	71	72	74	Asia/Oceania/Middle East
HONG-KONG	369	378	390	401	412	433	453	473	Asia/Oceania/Middle East
INDIA	7626	8572	9444	10606	11744	13268	15027	16896	Asia/Oceania/Middle East
INDONESIA	5076	6035	6877	7490	7910	8891	9460	10494	Asia/Oceania/Middle East
IRAN	6500	6800	7100	7500	8160	9000	9800	10620	Asia/Oceania/Middle East
IRAQ	775	857	864	872	878	885	1000	1080	Asia/Oceania/Middle East
ISRAEL	1652	1677	1779	1876	1912	2003	2164	2265	Asia/Oceania/Middle East
JAPAN	57091	57521	57624	57865	58020	58347	58670	59421	Asia/Oceania/Middle East
JORDAN	428	482	538	596	668	691	820	890	Asia/Oceania/Middle East
KAZAKHSTAN	1409	1745	2183	2571	2688	3088	3554	3850	Asia/Oceania/Middle East
KUWAIT	536	583	630	672	713	737	785	850	Asia/Oceania/Middle East
KYRGYZSTAN	201	219	230	305	330	360	390	400	Asia/Oceania/Middle East
LEBANON	430	423	426	440	445	450	467	490	Asia/Oceania/Middle East
MALAYSIA	6552	7024	7504	8057	8602	9218	9831	10467	Asia/Oceania/Middle East
NEW CALEDONIA	59	59	64	65	67	70	80	90	Asia/Oceania/Middle East
NEW ZEALAND	2182	2241	2282	2299	2329	2327	2362	2425	Asia/Oceania/Middle East
OMAN	285	390	400	467	474	520	570	620	Asia/Oceania/Middle East
PAKISTAN	1410	1478	1544	1654	1764	1849	2006	2188	Asia/Oceania/Middle East
PALESTINE	104	89	61	75	98	101	101	101	Asia/Oceania/Middle East
PHILIPPINES	2580	2583	2547	2556	2646	2771	2861	2936	Asia/Oceania/Middle East
QATAR	246	251	300	416	450	490	540	590	Asia/Oceania/Middle East
SAUDI ARABIA	3198	3206	3400	3503	3666	4020	4400	4770	Asia/Oceania/Middle East
SINGAPORE	463	498	541	577	604	624	633	648	Asia/Oceania/Middle East
SOUTH KOREA	11122	11607	12100	12484	13024	13632	14136	14577	Asia/Oceania/Middle East
SRI LANKA	340	343	348	352	353	355	400	430	Asia/Oceania/Middle East
SYRIA	242	247	400	552	600	741	825	890	Asia/Oceania/Middle East
TAIWAN	5634	5698	5713	5674	5704	5643	5960	6091	Asia/Oceania/Middle East
THAILAND	3943	3708	3942	4188	4462	4750	5405	6274	Asia/Oceania/Middle East
UNITED ARAB EMIRATES	796	807	1000	1318	1337	1470	1610	1740	Asia/Oceania/Middle East
VIETNAM	525	532	800	1204	1300	1430	1560	1690	Asia/Oceania/Middle East
YEMEN	348	369	394	412	431	449	470	490	Asia/Oceania/Middle East
ALGERIA	1906	2043	2212	2395	2593	2691	2800	2900	Africa
ANGOLA	273	276	400	566	574	590	610	640	Africa
BENIN	142	144	146	153	160	167	170	180	Africa
BOTSWANA	83	92	105	121	135	177	180	190	Africa
BURKINA FASO	85	88	105	109	112	116	120	130	Africa
BURUNDI	14	15	16	16	16	17	18	20	Africa
CAMEROON	176	179	184	193	201	210	220	230	Africa
CONGO	894	903	911	914	917	920	943	982	Africa
EGYPT	2560	2307	2400	2546	3000	3437	3600	3800	Africa
ETHIOPIA	74	73	73	75	76	77	79	82	Africa
GHANA	110	275	370	500	440	450	470	490	Africa
IVORY COAST	270	275	298	312	326	340	350	370	Africa
KENYA	328	346	450	578	500	520	540	570	Africa
LIBERIA	12	19	16	13	13	13	14	15	Africa
LIBYA	1100	1357	1400	1420	1430	1436	1500	1600	Africa
MADAGASCAR	75	77	110	146	141	150	160	170	Africa
MALAWI	35	36	44	55	55	60	60	60	Africa
MALI	75	86	98	116	119	124	130	140	Africa
MAURITANIA	12	13	13	13	13	14	15	16	Africa
MAURITIUS	85	92	100	110	118	127	136	148	Africa
MOROCCO	1450	1492	1644	1721	1798	1875	2000	2100	Africa
MOZAMBIQUE	126	141	156	156	204	233	240	250	Africa
NIGERIA	1103	2176	2200	2250	2288	2400	2500	2600	Africa
SENEGAL	163	168	172	189	197	206	210	220	Africa
SOUTH AFRICA	4575	4890	5161	5276	5411	5596	5832	6111	Africa
SUDAN	38	39	40	40	41	41	42	44	Africa
TANZANIA	32	40	80	177	180	190	200	210	Africa
TOGO	101	101	105	105	106	108	111	116	Africa
TUNISIA	852	874	830	787	820	848	880	920	Africa
UGANDA	57	59	91	94	97	101	110	120	Africa
ZAMBIA	294	303	200	135	190	200	210	220	Africa
ZIMBABWE	590	599	610	617	626	650	680	710	Africa
Download Data