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
// create a data set
4
var data = anychart.data.set([
5
["QTR1", 1.5, 2.5, 2.0, 1.5, 1.5, 1.0],
6
["QTR2", 0.5, 2.0, 3.0, 2.5, 1.5, 0.5],
7
["QTR3", 1.5, 3.0, 2.5, 1.5, 0.5, 1.0],
8
["QTR4", 1.5, 2.0, 2.5, 1.5, 1.5, 1.0]
9
]);
10
11
// map the data
12
var seriesData_1 = data.mapAs({x: 0, value: 1});
13
var seriesData_2 = data.mapAs({x: 0, value: 2});
14
var seriesData_3 = data.mapAs({x: 0, value: 3});
15
var seriesData_4 = data.mapAs({x: 0, value: 4});
16
var seriesData_5 = data.mapAs({x: 0, value: 5});
17
var seriesData_6 = data.mapAs({x: 0, value: 6});
18
19
// create a chart
20
var chart = anychart.column();
21
22
// create scales and set stacking modes
23
var yScale1 = anychart.scales.linear();
24
yScale1.stackMode("percent");
25
26
var yScale2 = anychart.scales.linear();
27
yScale2.stackMode("percent");
28
29
var yScale3 = anychart.scales.linear();
30
yScale3.stackMode("percent");
31
32
// create column series and bind them to different scales
33
chart.column(seriesData_1).yScale(yScale1);
34
chart.column(seriesData_2).yScale(yScale1);
35
36
chart.column(seriesData_3).yScale(yScale2);
37
chart.column(seriesData_4).yScale(yScale2);
38
39
chart.column(seriesData_5).yScale(yScale3);
40
chart.column(seriesData_6).yScale(yScale3);
41
42
/* bind the Y-axis to the first scale
43
you can avoid this setting by reusing the primary y-scale
44
when you create yScale1:
45
var yScale1 = chart.yScale();*/
46
chart.yAxis().scale(yScale1);
47
48
// configure labels on the y-axis
49
chart.yAxis().labels().format("{%value}%");
50
51
// configure tooltips
52
chart.tooltip().format("{%yPercentOfCategory}{decimalsCount:2}%");
53
54
// set the chart title
55
chart.title("Percent Stacked Chart: Clustered");
56
57
// set the container id
58
chart.container("container");
59
60
// initiate drawing the chart
61
chart.draw();
62
});