html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

    // set stage

    var stage = anychart.graphics.create("container");

​

    // create variable for custom theme

    var customTheme = {

        "defaultFontSettings": {

            "fontSize": 9

        },

        "chart": {

            "title": false,

            "legend": false

        }

    };

​

    // apply custom theme

    anychart.theme(customTheme);

​

    // set data

    var data_1 = anychart.data.set([

        ["Green" , 10000, 30],

        ["Red" , 15000, 80],

        ["Herbal" , 16000, 50],

        ["Black" , 19000, 35],

        ["Berry" , 9000, 49]

    ]);

​

    // set data

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

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

​

    // set chart_1

    var chart_1 = anychart.column();

​

    chart_1.column(seriesData_1);

​

    //create scale for line series and extraYAxis

    //it force line series to not stuck values with over series

    var scale = anychart.scales.linear();

    scale.minimum(0);

    scale.maximum(100);

​

    //create line series and set scale for it

    var lineSeries = chart_1.spline(seriesData_2);

    lineSeries.yScale(scale);

​

    //create extra axis on the right side of chart

    var extraYAxis = chart_1.yAxis(1);

    extraYAxis.title("Customers under 20 years old");

    extraYAxis.orientation("right");

    extraYAxis.scale(scale);

    var extraYLabels = chart_1.yAxis(1).labels();

    extraYLabels.format(function(){

        return this.tickValue+"%";

    });

​

    // axis name

    var yAxis_1 = chart_1.yAxis();

    yAxis_1.title("Sales (.oz)");

​

    // set chart title

    chart_1.title("Popular Tea Types in the Tea House");

​

    // chart size and position

    chart_1.bounds(0, 0, 420, 600);

​

    // draw

    chart_1.container(stage);

    chart_1.draw();

​

    //chart 2

​

    // set data

    var data_2 = [

        ["Chocolate" , 3120],

        ["Cookies" , 5054],

        ["Marshmallows" , 10220],

        ["Sweets" , 2340],

        ["Macaroons" , 3421]

    ];

​

    // set chart_2

    var chart_2 = anychart.pie(data_2);

    chart_2.innerRadius("30%");

​

    var labels_2 = chart_2.labels();

    labels_2.fontColor("White");

    chart_2.title("Confectionery sold in Tea House");

​

    // chart size and position

    chart_2.bounds(420, 0, 245, 300);

​

    // draw

    chart_2.container(stage);

    chart_2.draw();

​

    //chart 3

​

    // set data

    var data_3 = [

        ["9.00 - 12.00", 9000],

        ["12.00 - 14.00", 12000],

        ["14.00 - 16.00", 13000],

        ["16.00 - 18.00", 15400],

        ["18.00 - 21.00", 9500]

    ];

​

    // set chart_2

    var chart_3 = anychart.bar(data_3);

    chart_3.title("Popular hours");

​

    // chart size and position

    chart_3.bounds(420, 300, 245, 300);

​

    // draw

    chart_3.container(stage);

    chart_3.draw();

});