HTMLcopy
1
<div id="controls">
2
Anchor:
3
<select onchange="setAnchor(this)">
4
<option>auto</option>
5
<option>center</option>
6
<option>center-bottom</option>
7
<option>center-top</option>
8
<option>left-bottom</option>
9
<option>left-center</option>
10
<option>left-top</option>
11
<option>right-bottom</option>
12
<option>right-center</option>
13
<option>right-top</option>
14
</select>
15
Position:
16
<select onchange="setPosition(this)">
17
<option>auto</option>
18
<option>center</option>
19
<option>center-bottom</option>
20
<option>center-top</option>
21
<option>left-bottom</option>
22
<option>left-center</option>
23
<option>left-top</option>
24
<option>right-bottom</option>
25
<option>right-center</option>
26
<option>right-top</option>
27
</select>
28
</div>
29
<div id="container"></div>
CSScopy
x
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
7
8
#controls {
9
position: absolute;
10
left: 0px;
11
top: 0px;
12
z-index: 999;
13
}
JavaScriptcopy
49
1
function setAnchor(element) {
2
chart.connectors().labels().anchor(element.value);
3
}
4
5
function setPosition(element) {
6
chart.connectors().labels().position(element.value);
7
}
8
9
anychart.onDocumentReady(function () {
10
var data = anychart.data.set([
11
["Start", 23],
12
["Jan", 22],
13
["Feb", -55],
14
["Subtotal", { isTotal: true }],
15
["Mar", -90],
16
["Apr", 37],
17
["May", -24],
18
["End", { isTotal: true }],
19
]);
20
21
// map the data
22
var seriesData_1 = data.mapAs({ x: 0, value: 1 });
23
24
// create a waterfall chart
25
chart = anychart.waterfall();
26
27
chart.lineMarker(0).stroke({color: 'red', thickness: 1, opacity: 0.3});
28
chart.title("Waterfall: stack labels positioning");
29
30
chart.waterfall(seriesData_1);
31
32
chart.labels().position("center");
33
chart.labels().fontColor("white");
34
chart.labels().format('{%absolute}');
35
36
chart.connectors().labels(true);
37
/*
38
Show next stack raw contribution,
39
contribution percent relative to previous stack absolute value
40
and contribution relative to previous stack contribution.
41
*/
42
chart.connectors().labels().format('V:{%value}\nA:{%total}\nR:{%stack}');
43
chart.connectors().labels().background().enabled(true);
44
chart.connectors().labels().background().fill({color: 'white', opacity: 0.5});
45
46
chart.stackLabels().enabled(true);
47
48
chart.container("container").draw();
49
});