HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function() {
2
3
// data
4
var data = anychart.data.set([
5
["Winter", 12000, 12000, 10000],
6
["Spring", 13000, 12000, 17000],
7
["Summer", 25000, 15000, 19000],
8
["Autumn", 16000, 16000, 16000]
9
]);
10
11
var dataSet1 = data.mapAs({x: [0], value: [1]});
12
var dataSet2 = data.mapAs({x: [0], value: [2]});
13
var dataSet3 = data.mapAs({x: [0], value: [3]});
14
15
// set chart type
16
var chart = anychart.area3d();
17
18
var yScale = chart.yScale();
19
yScale.stackMode("percent");
20
21
// setting title
22
chart.title("3D Percent Stacked Area Chart");
23
24
// enabled grids
25
chart.grid(0).enabled(true);
26
chart.grid(1).enabled(true).layout("vertical");
27
28
// set axes titles
29
var xAxis = chart.xAxis();
30
xAxis.title("Month");
31
var yAxis = chart.yAxis();
32
yAxis.title("Sales");
33
34
// configure tooltips
35
chart.tooltip().format("{%Value} ({%YPercentOfCategory}{decimalsCount:2}%)");
36
37
// configure labels on the Y-axis
38
yAxis.labels().format("{%Value}%");
39
40
// create series
41
var series1 = chart.area(dataSet1);
42
series1.name("Sales 2009");
43
var series2 = chart.area(dataSet2);
44
series2.name("Sales 2010");
45
var series3 = chart.area(dataSet3);
46
series3.name("Sales 2011");
47
48
// draw chart
49
chart.container("container");
50
chart.draw();
51
});