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
["FRCST20", 0, 0, 0, 0, 0, 0, 0, 0, 0],
6
["TT", -122, -42, 16, -194, -12, -12, 48, -97, -202],
7
["MT", 1, 35, 12, -22, 0, 4, 32, 5, -38],
8
["MM NB", 0, 0, 0, 0, 0, 0, 0, -2, -47],
9
["PL", -265, 109, 149, 300, 0, 0, -320, 33, -442],
10
["E-COM", -45, -1, -2, 0, -25, 14, 5, 2, -87],
11
["FS", -11, 109, 147, 45, 0, 0, 103, 35, -17],
12
["IND.", 0, 0, 0, 0, 0, 4, 0, -8, 733],
13
["INTR", 116, 77, 24, 143, -12, 1, 413, 108, 177],
14
["RUTF", 0, 0, 0, 0, 0, 0, 0, 0, 0],
15
["BUDGET21", {isTotal: true}, {isTotal: true}, {isTotal: true}, {isTotal: true}, {isTotal: true}, {isTotal: true}, {isTotal: true}, {isTotal: true}, {isTotal: true}],
16
]);
17
18
// map the data
19
var seriesData_1 = data.mapAs({x: 0, value: 1});
20
var seriesData_2 = data.mapAs({x: 0, value: 2});
21
var seriesData_3 = data.mapAs({x: 0, value: 3});
22
var seriesData_4 = data.mapAs({x: 0, value: 4});
23
var seriesData_5 = data.mapAs({x: 0, value: 5});
24
var seriesData_6 = data.mapAs({x: 0, value: 6});
25
var seriesData_7 = data.mapAs({x: 0, value: 7});
26
var seriesData_8 = data.mapAs({x: 0, value: 8});
27
var seriesData_9 = data.mapAs({x: 0, value: 9});
28
29
// create a waterfall chart
30
var chart = anychart.waterfall();
31
32
// create the first series and set the data
33
var series1 = chart.waterfall(seriesData_1);
34
35
// create the second series and set the data
36
var series2 = chart.waterfall(seriesData_2);
37
38
// create the third series and set the data
39
var series3 = chart.waterfall(seriesData_3);
40
41
// create the fourth series and set the data
42
var series4 = chart.waterfall(seriesData_4);
43
44
// create the fifth series and set the data
45
var series5 = chart.waterfall(seriesData_5);
46
47
// create the sixth series and set the data
48
var series6 = chart.waterfall(seriesData_6);
49
50
// create the seventh series and set the data
51
var series7 = chart.waterfall(seriesData_7);
52
53
// create the eighth series and set the data
54
var series8 = chart.waterfall(seriesData_8);
55
56
// create the ninth series and set the data
57
var series9 = chart.waterfall(seriesData_9);
58
59
// configure labels
60
chart.labels().position("center");
61
chart.labels().fontColor("white");
62
63
// set the chart title
64
chart.title("Waterfall Chart: Multiple Series");
65
66
// set the container id
67
chart.container("container");
68
69
// initiate drawing the chart
70
chart.draw();
71
});
72