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", 2, 2, 6],
6
["QTR2", 3, 3, 4],
7
["QTR3", 4, 4, 2],
8
["QTR4", 5, 2.5, 2.5]
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
16
// create a chart
17
var chart = anychart.column();
18
19
/* enable the percent stacking mode
20
on the default primary value scale*/
21
chart.yScale().stackMode("percent");
22
23
// set the tick interval on the value scale
24
chart.yScale().ticks().interval(20);
25
26
// create column series
27
chart.column(seriesData_1);
28
chart.column(seriesData_2);
29
chart.column(seriesData_3);
30
31
// configure labels on the Y-axis
32
chart.yAxis().labels().format("{%Value}%");
33
34
// configure tooltips
35
chart.tooltip().format("{%yPercentOfCategory}{decimalCount:2}%");
36
37
// set the chart title
38
chart.title("Stacked Chart: Percent Mode");
39
40
// set the container id
41
chart.container("container");
42
43
// initiate drawing the chart
44
chart.draw();
45
});