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([

        ['1988-1990', 211, 1603, 0],

        ['1995', 415, 7925, 2792],

        ['2000', 391, 2762, 2398],

        ['2005', 970, 6840, 3300],

        ['2010', 1237, 19886, 11000],

        ['2015', 2120, 24115, 14500],

        ['2016', 2613, 26890, 15800],

        ['2017', 2741, 37100, 17500],

        ['20/09/2018', 2182, 25370, 13250]

    ]);

​

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

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

​

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

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

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

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

​

    // create column chart

    var chart = anychart.column3d();

​

    // turn on chart animation

    chart.animation(true);

​

    // set chart title text settings

    chart.title('Top 10 Products by Revenue in three Regions');

​

    // temp variable to store series instance

    var series;

​

    // helper function to setup label settings for all series

    var setupSeries = function (series, name) {

        series.name(name);

        series.selected()

                .fill('#f48fb1 0.8')

                .stroke('1.5 #c2185b');

    };

​

    // create first series with mapped data

    series = chart.column(seriesData_1);

    series.xPointPosition(0.25);

    setupSeries(series, 'Florida');

​

    // create second series with mapped data

    series = chart.column(seriesData_2);

    series.xPointPosition(0.45);

    setupSeries(series, 'Texas');

      // create second series with mapped data

    series = chart.column(seriesData_3);

    series.xPointPosition(0.65);

    setupSeries(series, 'Mexico');

​

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

​

    // set titles for Y-axis

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

​

    // set chart title text settings

    chart.barGroupsPadding(0.3);

​

    // turn on legend

    chart.legend()

            .enabled(true)

            .fontSize(13)

            .padding([0, 0, 20, 0]);

​

    chart.interactivity().hoverMode('single');

​

    chart.tooltip().valuePrefix('$');

​

    // set container id for the chart

    chart.container('container');

​

    // initiate chart drawing

    chart.draw();

});