html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create data   

    var data = [

        {x: "Start", value:  23, custom_field: "info 1"},

        {x: "Jan",   value:  22, custom_field: "info 2"},

        {x: "Feb",   value: -46, custom_field: "info 3"},

        {x: "Mar",   value: -91, custom_field: "info 4"},

        {x: "Apr",   value:  37, custom_field: "info 5"},

        {x: "May",   value: -21, custom_field: "info 6"},

        {x: "Jun",   value:  53, custom_field: "info 7"},

        {x: "Jul",   value:  31, custom_field: "info 8"},

        {x: "Aug",   value: -15, custom_field: "info 9"},

        {x: "Sep",   value:  42, custom_field: "info 10"},

        {x: "Oct",   value:  53, custom_field: "info 11"},

        {x: "Nov",   value: -15, custom_field: "info 12"},

        {x: "Dec",   value:  51, custom_field: "info 13"},

        {x: "End", isTotal: true, custom_field: "info 14"}

    ];

​

    // create a waterfall chart

    var chart = anychart.waterfall();

​

    // create a series and set the data

    var series = chart.waterfall(data);

    var totalSplit = chart.addSeries([

      {x:'s1', value: 100, fill: 'lightgrey'},

      {x:'s2', value: 24, fill: 'lightgrey'}      

    ])

​

    // configure labels

    chart.labels().format("{%absolute}");

​

    // configure tooltips

    chart.tooltip().titleFormat("Absolute | Difference");

    chart.tooltip().format("{%absolute}\n{%diff}\n\n{%custom_field}");

​

    // set the chart title

    chart.title("Waterfall Chart: Labels and Tooltips (Tokens)");

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});