html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create a data set

    var data = anychart.data.set([

      ["QTR1", 2.5, 2.0, 2.5, 3.0],

      ["QTR2", 2.0, 1.5, 3.0, 3.5],

      ["QTR3", 1.5, 2.5, 3.5, 2.5],

      ["QTR4", 3.5, 2.5, 2.5, 1.5]

    ]);

​

    // 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});

    var seriesData_4 = data.mapAs({x: 0, value: 4});

​

    // create a chart

    var chart = anychart.column();

​

    // create scales and set stacking modes

    yScale1 = anychart.scales.linear();

    yScale1.stackMode("percent");

​

    yScale2 = anychart.scales.linear();

    yScale2.stackMode("percent");

​

    // create area and column series

    // bind them to different scales

    chart.area(seriesData_1).yScale(yScale1);

    chart.area(seriesData_2).yScale(yScale1);

​

    chart.column(seriesData_3).yScale(yScale2);

    chart.column(seriesData_4).yScale(yScale2);

​

    /* bind the y-axis to the first scale

    you can avoid this setting by reusing the primary y-scale

    when you create yScale1:

    var yScale1 = chart.yScale();*/

    chart.yAxis().scale(yScale1);

​

    // configure labels on the y-axis

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

​

    // configure tooltips

    chart.tooltip().format("{%yPercentOfCategory}{decimalsCount:2}%");

​

    // set the chart title

    chart.title("Percent Stacked Chart: Area/Column Overlay");

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

​

});