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

       ['Q1: It was my first experience of<BR>using an app for dialogue',40.54,43.24,0,10.81,5.41],

['Q2: I enjoyed using talkwall in<BR>classroom',2.7,2.7,13.51,56.76,24.32],

['Q3: Talkwall made the learning<BR>process easy',2.7,32.43,27.03,29.73,8.11],

['Q4: More courses should be thought<BR>using talkwall',2.7,18.92,29.73,29.73,18.92],

['Q5: I believe I will remember the<BR>taught lessons better now',0,13.51,29.73,40.54,16.22],

['Q6: I did not have difficulty using the<BR>application',2.7,8.11,2.7,45.95,40.54],

['Q7: Talkwall is easy to use and<BR>require no special training for using it',0,2.7,5.41,45.95,45.95],

['Q8: After experience with talkwall I<BR>want all lessons to be dialogue based',5.41,21.62,18.92,32.43,21.62],

['Q9: I will share experience of what I<BR>have learnt with others',8.11,5.41,10.81,62.16,13.51]

​

    ]);

​

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

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

​

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

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

​

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

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

​

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

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

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

​

    // create bar chart

    var chart = anychart.bar();

​

    // turn on chart animation

    chart.animation(true).barGroupsPadding(0.5);

​

    // force chart to stack values by Y scale.

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

chart.labels().enabled(true).position("center-center").offsetX(30).offsetY(-15);

  chart.labels().format('{%value}{decimalsCount:0}%').fontColor('white')

    var crosshair = chart.crosshair();

    // turn on the crosshair

    crosshair.enabled(true)

            .yStroke(null)

            .xStroke('#fff')

            .zIndex(99);

    crosshair.yLabel().enabled(false);

    crosshair.xLabel().enabled(false);

​

    // set chart title text settings

    chart.title('Feedback');

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

​

    // 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

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

        series.name(name)

                 .stroke('1 #fff 1')

                .fill(color);

    };

​

    // temp variable to store series instance

    var series;

​

    // create first series with mapped data

    series = chart.bar(seriesData_5);

    setupSeries(series, 'Strongly Agree', '#083D77 0.8');

    // create second series with mapped data

    series = chart.bar(seriesData_4);

    setupSeries(series, 'Agree', '#59A9FF  0.8');

​

    // create third series with mapped data

    series = chart.bar(seriesData_3);

    setupSeries(series, 'Neutral', '#7B8C96 0.5');

​

    // create fourth series with mapped data

    series = chart.bar(seriesData_2);

    setupSeries(series, 'Disagree', '#EE964B 0.8');

​

        // create fourth series with mapped data

    series = chart.bar(seriesData_1);

    setupSeries(series, 'Strongly Disagree' , '#D13B1D 0.8');

    // set interactivity and toolitp settings

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

    // chart.tooltip().displayMode('union');

​

    // turn on legend

    chart.legend()

            .enabled(true)

            .fontSize(13)

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

​

    // set container id for the chart

    chart.container('container');

     var axisLabels = chart.xAxis().labels();

  axisLabels.useHtml(true);

  axisLabels.format("<span style='color:black;'>{%value}</span>");

    // initiate chart drawing

    chart.draw();

});