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]

  ]);

​

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

  var firstSeriesData = dataSet.mapAs();

​

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

  var secondSeriesData = dataSet.mapAs();

​

  // 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('percent');

​

  // set chart title text settings

  chart.title('Regional ratio of cosmetic products sales');

​

  // set yAxis labels formatting, force it to add % to values

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

​

  // temp variable to store series instance

  var series;

  var seriesArray= [firstSeriesData, secondSeriesData]

​

  for(let i=0;i<seriesArray.length;i++){

    const view = chart.column(seriesArray[i]);

    if (i==0)view.select([0]);

  }

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

  chart.tooltip().titleFormat('{%X}').displayMode('union');

  // turn on legend

  chart.legend().enabled(true).fontSize(13);

​

  // set container id for the chart

  chart.container('container');

​

  // initiate chart drawing

  chart.draw();

});