Iframe
HTML with links
ZIP with files
Column Chart
Geo Map
Line Chart
Pie Chart
Stock Chart
From scratchHTMLcopy
1
<div>2
<button onclick="enableStackLabels(this)">Enable stack labels</button>3
<hr>4
<button onclick="isVertical(this)">Is vertical</button>5
<hr>6
<div>7
<table>8
<caption>Stack label position</caption>9
<tbody><tr>10
<td colspan="3">11
<button onclick="setAnchor(this)" style="width:100%">auto</button>12
</td>13
</tr>14
<tr>15
<td>16
<button onclick="setAnchor(this)">left-top</button>17
</td>18
<td>19
<button onclick="setAnchor(this)">center-top</button>20
</td>21
<td>22
<button onclick="setAnchor(this)">right-top</button>23
</td>24
</tr>25
<tr>26
<td>27
<button onclick="setAnchor(this)">left-center</button>28
</td>29
<td>30
<button onclick="setAnchor(this)">center</button>31
</td>32
<td>33
<button onclick="setAnchor(this)">right-center</button>34
</td>35
</tr>36
<tr>37
<td>38
<button onclick="setAnchor(this)">left-bottom</button>39
</td>40
<td>41
<button onclick="setAnchor(this)">center-bottom</button>42
</td>43
<td>44
<button onclick="setAnchor(this)">right-bottom</button>45
</td>46
</tr>47
</tbody></table>48
</div>49
<hr>50
<div id="container"></div>51
</div>CSScopy
6
1
html, body, #container {2
width: 100%;3
height: 90%;4
margin: 0;5
padding: 0;6
}JavaScriptcopy
x
1
var chart;2
anychart.onDocumentReady(function () {3
chart = anychart.waterfall();4
5
var data = anychart.data.set([6
["Start", 23, 30, 21],7
["Jan", 22, 22, 54],8
["Feb", -46, 45, -32],9
["Mar", -91, -30, -28],10
["Apr", 37, -27, 36],11
["May", -24, 62, -48],12
["Jun", 15, 40, -29],13
14
["Aug", -25, -46, 36],15
["Sep", 42, 23, 22],16
["Oct", 67, -44, -40],17
["Nov", -24, -31, 37],18
["Dec", 51, 28, 25],19
["End", { isTotal: true }, { isTotal: true }, { isTotal: true }],20
21
]);22
23
var seriesData_1 = data.mapAs({x: 0, value: 1});24
var seriesData_2 = data.mapAs({x: 0, value: 2});25
var seriesData_3 = data.mapAs({x: 0, value: 3});26
27
chart.labels().enabled(false);28
29
chart.waterfall(seriesData_1);30
chart.waterfall(seriesData_2);31
chart.waterfall(seriesData_3);32
33
chart.container("container").draw();34
});35
36
function enableStackLabels(button) {37
button.innerText = !chart.stackLabels().enabled() ?38
'Disable stack labels' : 'Enable stack labels';39
40
chart.stackLabels().enabled(!chart.stackLabels().enabled());41
}42
43
function setAnchor(button) {44
var position = button.innerText;45
46
chart.stackLabels().position(position);47
}48
49
function isVertical(button) {50
button.innerText = !chart.isVertical() ? 'Is horizontal' : 'Is vertical';51
chart.isVertical(!chart.isVertical());52
}