html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    // create column chart

    var chart = anychart.column3d();

​

    // turn on chart animation

    chart.animation(true);

​

    // set chart title text settings

    chart.title('Top 10 Cosmetic Products by Revenue');

​

    // create area series with passed data

    chart.column([

        ['Rouge', '50540'],

        ['Foundation', '94190'],

        ['Mascara', '102610'],

        ['Lip gloss', '110430'],

        ['Lipstick', '128000'],

        ['Nail polish', '143760'],

        ['Eyebrow pencil', '170670'],

        ['Eyeliner', '213210'],

        ['Eyeshadows', '209980']

    ]);

​

    chart.tooltip()

            .position('center-top')

            .anchor('center-bottom')

            .offsetX(0)

            .offsetY(5)

            .format('${%Value}');

​

    // set scale minimum

    chart.yScale().minimum(0);

​

    // set yAxis labels formatter

    chart.yAxis().labels().format('{%Value}{groupsSeparator: }');

​

    chart.tooltip().positionMode('point');

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

​

    chart.xAxis().title('Products by Revenue');

    chart.yAxis().title('Revenue in Dollars');

​

    // set container id for the chart

    chart.container('container');

​

    // initiate chart drawing

    chart.draw();

});