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

    ['Nail polish', 12814, 3054, 4376, 4229],

    ['Eyebrow pencil', 13012, 5067, 3987, 3932],

    ['Rouge', 11624, 7004, 3574, 5221],

    ['Lipstick', 8814, 9054, 4376, 9256],

    ['Eyeshadows', 12998, 12043, 4572, 3308],

    ['Eyeliner', 12321, 15067, 3417, 5432],

    ['Foundation', 10342, 10119, 5231, 13701],

    ['Lip gloss', 22998, 12043, 4572, 4008],

    ['Mascara', 11261, 10419, 6134, 18712],

    ['Powder', 10261, 14419, 5134, 25712]

  ]);

​

  // 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 third column of data set

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

​

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

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

​

  // create bar chart

  var chart = anychart.column();

​

  // turn on chart animation

  chart.animation(true);

​

  // force chart to stack values by Y scale.

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

​

  // set chart title text settings

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

  chart.title().padding([0, 0, 5, 0]);

​

  // helper function to setup label settings for all series

  var setupSeriesLabels = function (series, name) {

    series.name(name)

      .stroke('3 #fff 1');

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

  };

​

  // temp variable to store series instance

  var series;

​

  // create first series with mapped data

  series = chart.column(seriesData_1);

  setupSeriesLabels(series, 'Florida');

​

  // create second series with mapped data

  series = chart.column(seriesData_2);

  setupSeriesLabels(series, 'Texas');

​

  // create third series with mapped data

  series = chart.column(seriesData_3);

  setupSeriesLabels(series, 'Arizona');

​

  // create fourth series with mapped data

  series = chart.column(seriesData_4);

  setupSeriesLabels(series, 'Nevada');

​

  // turn on legend

  chart.legend().enabled(true).fontSize(13).padding([0, 0, 20, 0]);

  // set yAxis labels formatter

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

​

  // set titles for axes

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

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

​

  // set interactivity hover

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

​

  chart.tooltip()

    .valuePrefix('$')

    .displayMode('union');

​

  // show average category labels

  var categoryLabels = chart.getSeries(0).labels().enabled(true);

  categoryLabels.format("{%categoryYAverage}");

​

  // set container id for the chart

  chart.container('container');

​

  // initiate chart drawing

  chart.draw();

});