stackable in amcharts 3

Solutions on MaxInterview for stackable in amcharts 3 by the best coders in the world

showing results for - "stackable in amcharts 3"
Younes
15 Feb 2020
1<!-- Styles -->
2<style>
3body { background-color: #3f3e3b; color: #fff; }
4#chartdiv {
5  width: 100%;
6  height: 500px;
7}
8</style>
9
10<!-- Resources -->
11<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
12<script src="https://www.amcharts.com/lib/3/serial.js"></script>
13<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
14<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
15<script src="https://www.amcharts.com/lib/3/themes/chalk.js"></script>
16
17<!-- Chart code -->
18<script>
19var chart = AmCharts.makeChart("chartdiv", {
20    "type": "serial",
21  "theme": "chalk",
22    "legend": {
23        "horizontalGap": 10,
24        "maxColumns": 1,
25        "position": "right",
26    "useGraphSettings": true,
27    "markerSize": 10
28    },
29    "dataProvider": [{
30        "year": 2003,
31        "europe": 2.5,
32        "namerica": 2.5,
33        "asia": 2.1,
34        "lamerica": 0.3,
35        "meast": 0.2,
36        "africa": 0.1
37    }, {
38        "year": 2004,
39        "europe": 2.6,
40        "namerica": 2.7,
41        "asia": 2.2,
42        "lamerica": 0.3,
43        "meast": 0.3,
44        "africa": 0.1
45    }, {
46        "year": 2005,
47        "europe": 2.8,
48        "namerica": 2.9,
49        "asia": 2.4,
50        "lamerica": 0.3,
51        "meast": 0.3,
52        "africa": 0.1
53    }],
54    "valueAxes": [{
55        "stackType": "regular",
56        "axisAlpha": 0.3,
57        "gridAlpha": 0
58    }],
59    "graphs": [{
60        "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
61        "fillAlphas": 0.8,
62        "labelText": "[[value]]",
63        "lineAlpha": 0.3,
64        "title": "Europe",
65        "type": "column",
66    "color": "#000000",
67        "valueField": "europe"
68    }, {
69        "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
70        "fillAlphas": 0.8,
71        "labelText": "[[value]]",
72        "lineAlpha": 0.3,
73        "title": "North America",
74        "type": "column",
75    "color": "#000000",
76        "valueField": "namerica"
77    }, {
78        "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
79        "fillAlphas": 0.8,
80        "labelText": "[[value]]",
81        "lineAlpha": 0.3,
82        "title": "Asia-Pacific",
83        "type": "column",
84    "color": "#000000",
85        "valueField": "asia"
86    }, {
87        "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
88        "fillAlphas": 0.8,
89        "labelText": "[[value]]",
90        "lineAlpha": 0.3,
91        "title": "Latin America",
92        "type": "column",
93    "color": "#000000",
94        "valueField": "lamerica"
95    }, {
96        "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
97        "fillAlphas": 0.8,
98        "labelText": "[[value]]",
99        "lineAlpha": 0.3,
100        "title": "Middle-East",
101        "type": "column",
102    "color": "#000000",
103        "valueField": "meast"
104    }, {
105        "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
106        "fillAlphas": 0.8,
107        "labelText": "[[value]]",
108        "lineAlpha": 0.3,
109        "title": "Africa",
110        "type": "column",
111    "color": "#000000",
112        "valueField": "africa"
113    }],
114    "categoryField": "year",
115    "categoryAxis": {
116        "gridPosition": "start",
117        "axisAlpha": 0,
118        "gridAlpha": 0,
119        "position": "left"
120    },
121    "export": {
122    	"enabled": true
123     }
124
125});
126</script>
127
128<!-- HTML -->
129<div id="chartdiv"></div>