html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create a data set

    var data = anychart.data.set([

      ["Start", 23,  30,  21],

      ["Jan",   22,  22,  54],

      ["Feb",  -46,  45, -32],

      ["Mar",  -91, -30, -28],

      ["Apr",   37, -27,  36],

      ["May",  -24,  62, -48],

      ["Jun",   55,  40, -29],

      ["Jul",   31,  33,  41],

      ["Aug",  -25, -46,  36],

      ["Sep",   42,  23,  22],

      ["Oct",   67, -44, -40],

      ["Nov",  -24, -31,  37],

      ["Dec",   51,  28,  25],

      ["End", {isTotal: true}, {isTotal: true}, {isTotal: true}],

    ]);

​

    // map the data

    var seriesData_1 = data.mapAs({x: 0, value: 1});

    var seriesData_2 = data.mapAs({x: 0, value: 2});

    var seriesData_3 = data.mapAs({x: 0, value: 3});

​

    // create a waterfall chart

    var chart = anychart.waterfall();

​

    // create the first series, set the name and data

    var series1 = chart.waterfall(seriesData_1);

    series1.name("Product A");

​

    // create the second series, set the name and data

    var series2 = chart.waterfall(seriesData_2);

    series2.name("Product B");

​

    // create the third series, set the name and data

    var series3 = chart.waterfall(seriesData_3);

    series3.name("Product C");

​

    // disable labels

    series1.labels(false);

    series2.labels(false);

    series3.labels(false);

​

    // add hatch fills

    series1.hatchFill("percent05", "white", 1, 9);

    series1.fallingHatchFill("percent05", "white", 1, 9);

    series1.risingHatchFill("percent05", "white", 1, 9);

​

    series2.hatchFill("dashed-backward-diagonal", "white", 1, 9);

    series2.fallingHatchFill("dashed-backward-diagonal", "white", 1, 9);

    series2.risingHatchFill("dashed-backward-diagonal", "white", 1, 9);

​

    series3.hatchFill("forward-diagonal", "white", 1, 6);

    series3.fallingHatchFill("forward-diagonal", "white", 1, 6);

    series3.risingHatchFill("forward-diagonal", "white", 1, 6);

​

    // configure the legend

    chart.legend().itemsSourceMode("default");

​

    // set the chart title

    chart.title("Waterfall Chart: Legend");

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});