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 data
4
var data = [
5
["2018-04-01", null, null, null, null, null, null, null, null, null, null, null, null, null, null, 1, null],
6
["2018-05-01", null, null, null, null, null, 6, 1, null, null, null, null, 6, 1, null, 9, 1],
7
["2018-06-01", null, 1, 1, 1, 1, 17, 24, null, null, 1, 3, 29, 9, null, 60, null],
8
["2018-07-01", null, 3, null, 3, null, 26, 27, 1, 1, 1, null, 49, 12, 1, 98, 2],
9
["2018-08-01", 1, 2, null, 2, null, 18, 16, null, null, null, 2, 34, 6, null, 56, null],
10
["2018-09-01", null, null, null, 1, null, 4, 3, null, null, null, null, 5, 1, null, 9, 1]
11
];
12
13
// create a chart
14
var chart = anychart.column();
15
var labels = chart.labels();
16
17
// set data
18
chart.data(data);
19
20
// enable the percent stacking mode
21
chart.yScale().stackMode("percent");
22
23
// configure tooltips
24
chart.tooltip().format("{%yPercentOfCategory}{decimalsCount:2}%");
25
26
// configure labels on the y-axis
27
chart.yAxis().labels().format("{%Value}%");
28
29
labels.enabled(true);
30
labels.offsetY(-30);
31
labels.fontColor('white');
32
labels.format("{%yPercentOfCategory}{decimalsCount:1}%");
33
34
// set the chart title
35
chart.title("Percent Stacked Column Chart");
36
37
// set the container id
38
chart.container("container");
39
40
// initiate drawing the chart
41
chart.draw();
42
});