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

    ['#01', 0, 40, 20, 40, 0],  

    ['#02', 0, 60, 0, 40, 0],  

    ['#03', 0, 40, 40, 0, 20],   

    ['#04', 0, 60, 20, 20, 0],   

    ['#05', 0, 40, 40, 20, 0],   

    ['#06', 0, 40, 40, 20, 0],  

    ['#07', 0, 60, 20, 20, 0],  

    ['#08', 40, 0, 40, 20, 0],   

    ['#09', 0, 20, 0, 40, 40],   

    ['#10', 0, 20, 40, 40, 0],  

    ['#11', 20, 60, 0, 20, 0],   

    ['#12', 0, 40, 20, 40, 0],   

    ['#13', 0, 80, 0, 0, 20],   

    ['#14', 0, 40, 40, 20, 0],  

    ['#15', 0, 40, 40, 20, 0],   

    ['#16', 0, 60, 20, 20, 0],   

    ['#17', 0, 40, 0, 20, 40]  

  ]);

​

  // 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({ 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 secondSeriesData = 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 thirdSeriesData = 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 fourthSeriesData = dataSet.mapAs({ x: 0, value: 4 });

​

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

  var fifthSeriesData = dataSet.mapAs({ x: 0, value: 5 });

  // create bar chart

  var chart = anychart.bar();

​

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

​

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

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

​

  // helper function to setup label settings for all series, including color

  var setupSeriesLabels = function (series, name, color) {

    series.name(name).stroke('3 #fff 1').fill(color); // Set series fill color

    series.hovered().stroke('3 #fff 1').fill(anychart.color.darken(color));  // Darken color on hover

  };

​

  // temp variable to store series instance

  var series;

​

  // create first series with mapped data and assign color red

  series = chart.bar(firstSeriesData);

  setupSeriesLabels(series, 'No answer', 'red');

​

  // create second series with mapped data and assign color orange

  series = chart.bar(secondSeriesData);

  setupSeriesLabels(series, 'Level 1', 'orange');

​

  // create third series with mapped data and assign color yellow

  series = chart.bar(thirdSeriesData);

  setupSeriesLabels(series, 'Level 2', 'yellow');

​

  // create fourth series with mapped data and assign color green

  series = chart.bar(fourthSeriesData);

  setupSeriesLabels(series, 'Level 3', 'green');

​

  // create fifth series with mapped data and assign color blue

  series = chart.bar(fifthSeriesData);

  setupSeriesLabels(series, 'Level 4', 'blue');

  // turn on legend

  chart.legend().enabled(true).fontSize(14).padding([0, 0, 10, 0]);

​

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

​

  chart.tooltip().displayMode('union').valuePrefix('%');

​

  // set container id for the chart

  chart.container('container');

  // initiate chart drawing

  chart.draw();

});