html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create data   

    var data = [

      {x: "Start", value:  23},

      {x: "Jan",   value:  22},

      {x: "Feb",   value: -46},

      {x: "Mar",   value: -91},

      {x: "Apr",   value:  37},

      {x: "May",   value: -21},

      {x: "Jun",   value:  53},

      {x: "Jul",   value:  31},

      {x: "Aug",   value: -15},

      {x: "Sep",   value:  42},

      {x: "Oct",   value:  53},

      {x: "Nov",   value: -15},

      {x: "Dec",   value:  51},

      {x: "End", isTotal: true}

    ];

​

    // create a waterfall chart

    var chart = anychart.waterfall();

​

    // create a series and set the data

    var series = chart.waterfall(data);

​

    // configure the visual settings of the series

    series.normal().fill("#ff6666", 0.3);

    series.normal().hatchFill("forward-diagonal", "#ff6666", 0.5, 10);

    series.normal().stroke("#ff6666");

    series.hovered().fill("#ff6666", 0.1);

    series.hovered().hatchFill("forward-diagonal", "#ff6666", 0.5, 10);

    series.hovered().stroke("#ff6666", 2);

    series.selected().fill("#ff6666", 0.5);

    series.selected().hatchFill("forward-diagonal", "#ff6666", 0.5, 10);

    series.selected().stroke("#ff6666", 4);

​

    series.normal().fallingFill("#00cc99", 0.3);

    series.normal().fallingStroke("#00cc99", 1, "10 5", "round");

    series.hovered().fallingFill("#00cc99", 0.1);

    series.hovered().fallingStroke("#00cc99", 2, "10 5", "round");

    series.selected().fallingFill("#00cc99", 0.5);

    series.selected().fallingStroke("#00cc99", 4, "10 5", "round");

    series.normal().risingFill("#0066cc", 0.3);

    series.normal().risingStroke("#0066cc");

    series.hovered().risingFill("#0066cc", 0.1);

    series.hovered().risingStroke("#0066cc", 2);

    series.selected().risingFill("#0066cc", 0.5);

    series.selected().risingStroke("#0066cc", 4);

    // set the chart title

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

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});