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 stage
4
var stage = anychart.graphics.create("container");
5
6
// create data
7
var data = [
8
{x: "Start", value: 23},
9
{x: "Jan", value: 0},
10
{x: "Feb", value: -46},
11
{x: "Mar", value: -91},
12
{x: "Apr", value: 37},
13
{x: "May", value: -21},
14
{x: "Jun", value: 53},
15
{x: "Jul", value: 31},
16
{x: "Aug", value: -15},
17
{x: "Sep", value: 42},
18
{x: "Oct", value: 53},
19
{x: "Nov", value: -15},
20
{x: "Dec", value: 51},
21
{x: "End", isTotal: true}
22
];
23
24
// create and configure the first waterfall chart
25
var chart1 = anychart.waterfall(data);
26
chart1.title("Data Mode: Difference");
27
chart1.legend(false);
28
// set the data mode
29
chart1.dataMode("diff");
30
// set the chart container
31
chart1.container(stage);
32
// initiate drawing the chart
33
chart1.draw();
34
35
});