html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    // create data set on our data

    var dataSet = anychart.data.set([

        ['134 (Oct 26)',    0,      12.5,   12.5,   25,     0,      0,      12.5,   0,      37.5    ],

        ['135 (Nov 2)',     40,     0,      0,      15,     0,      15,     0,      7.5,    22.5    ],

        ['136 (Nov 9)',     0,      12.5,   0,      25,     0,      25,     0,      12.5,   25      ],

        ['137 (Nov 16)',    0,      0,      0,      25,     12.5,   25,     0,      12.5,   25      ],

        ['138 (Nov 23)',    0,      0,      0,      25,     12.5,   25,     0,      12.5,   25      ],

        ['139 (Nov 30)',    20,     0,      0,      0,      30,     20,     0,      10,     20      ],

        ['140 (Dec 7)',     0,      0,      0,      0,      25,     0,      0,      25,     37.5    ],

        ['141 (Dec 14)',    0,      12.5,   0,      0,      25,     0,      0,      12.5,   37.5    ],

        ['142 (Dec 21)',    0,      25,     0,      0,      0,      0,      0,      12.5,   37.5    ]

    ]);     

​

    // map data for the first series, take x from the zero area and value from the first area of data set

    var holidays = dataSet.mapAs({'x': 0, 'value': 1});

​

    // map data for the fourth series, take x from the zero area and value from the fourth area of data set

    var leaves = dataSet.mapAs({'x': 0, 'value': 2});

    // map data for the second series, take x from the zero area and value from the second area of data set

    var closeio = dataSet.mapAs({'x': 0, 'value': 3});

​

    // map data for the second series, take x from the zero area and value from the third area of data set

    var disbursements = dataSet.mapAs({'x': 0, 'value': 4});

​

    // map data for the fourth series, take x from the zero area and value from the fourth area of data set

    var verifications = dataSet.mapAs({'x': 0, 'value': 5});

    // map data for the fourth series, take x from the zero area and value from the fourth area of data set

    var reconciliation = dataSet.mapAs({'x': 0, 'value': 6});

    // map data for the fourth series, take x from the zero area and value from the fourth area of data set

    var support = dataSet.mapAs({'x': 0, 'value': 7});

    // map data for the fourth series, take x from the zero area and value from the fourth area of data set

    var improvements = dataSet.mapAs({'x': 0, 'value': 8});

    // map data for the fourth series, take x from the zero area and value from the fourth area of data set

    var foundations = dataSet.mapAs({'x': 0, 'value': 9});

    // create bar chart

    var chart = anychart.area();

​

    // turn on chart animation

    chart.animation(true);

​

    // force chart to stack values by Y scale.

    chart.yScale().stackMode('value');

​

    var crosshair = chart.crosshair();

    // turn on the crosshair

    crosshair.enabled(true)

            .yStroke(null)

            .xStroke('#fff')

            .zIndex(99);

    crosshair.yLabel().enabled(false);

    crosshair.xLabel().enabled(false);

​

​

    // set yAxis labels formatting, force it to add % to values

    chart.yAxis(0).labels().format("{%Value}%");

    chart.yScale().maximum(100);

​

    // helper function to setup label settings for all series

    var setupSeries = function (series, name) {

        series.name(name).stroke('0');

        series.markers().zIndex(100);

        series.hovered().stroke('3 #fff 1');

        series.hovered().markers()

                .enabled(true)

                .type('circle')

                .size(4)

                .stroke('1.5 #fff');

    };

​

    // temp variable to store series instance

    var series;

​

    // create first series with mapped data

    series = chart.area(holidays);

    series.normal().fill("#000", 0.7);

    setupSeries(series, 'Public Holidays');

​

    series = chart.area(leaves);

    series.normal().fill("#000", 0.6)

    setupSeries(series, 'Leaves');

​

    // create first series with mapped data

    series = chart.area(closeio);

    series.normal().fill('#D0021B')

    setupSeries(series, 'Close.io');

    // create second series with mapped data

    series = chart.area(disbursements);

    series.normal().fill("#7ED321", 1)

    setupSeries(series, 'Re-design: Loan Acceptance → Disbursement');

​

    // create third series with mapped data

    series = chart.area(verifications);

    series.normal().fill("#7ED321", .8)

    setupSeries(series, 'Re-design: Upload → Verification');

​

    // create third series with mapped data

    series = chart.area(reconciliation);

    series.normal().fill("#7ED321", .6)

    setupSeries(series, 'Repayment Reconciliation and Rescheduling');

​

    // create third series with mapped data

    series = chart.area(support);

    series.normal().fill('#F5A623')

    setupSeries(series, 'Customer Support');

​

    // create fourth series with mapped data

    series = chart.area(improvements);

    series.normal().stroke('0').fill("#4A90E2")

    setupSeries(series, 'Improvements');

​

    // create third series with mapped data

    series = chart.area(foundations);

    series.normal().stroke('0').fill("#4A90E2",0.4)

    setupSeries(series, 'Foundations');

​

    // set interactivity and toolitp settings

    chart.interactivity().hoverMode('by-x');

    chart.tooltip().displayMode('union');

​

    // turn on legend

    chart.legend()

            .enabled(true)

            .fontSize(15)

            .padding([0, 0, 25, 0])

            .itemsLayout('horizontal-expandable')

            .maxWidth('90%');

    // set container id for the chart

    chart.container('container');

​

    // initiate chart drawing

    chart.draw();

});