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

        ['Battery_SOC_Current leakage out of limit', 2, 4, 9, 0, 0],

        ['CLI_Read_Battery_SOC_Current out of limit', 2, 0, 0, 0, 0],

        ['I2C1 enable SOC power fail', 1, 1, 3, 1, 1],

        ['IO failure', 0, 0, 1, 1, 0],

        ['MLB damage', 0, 1, 0, 0, 0],

        ['No communication', 4, 1, 0, 6, 1],

        ['QT1/IO failure', 0, 0, 0, 0, 6],

        ['RTC', 0, 0, 0, 1, 1],

        ['VOC value high and smell', 1, 0, 0, 0, 0]

    ]);

​

    // 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 fourth 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('By Failure Mode');

​

    // 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 setupSeriesLabels = function(series, name) {

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

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

        series.labels(true);

        chart.labels().position("center");

        chart.labels().fontFamily("Helvetica");

        chart.labels().fontSize(20);

        chart.labels().fontDecoration("underline");

        chart.labels().fontWeight(600);

        series.labels().fontColor("#663399");

    };

​

    // temp variable to store series instance

    var series;

​

    // create first series with mapped data

    series = chart.bar(firstSeriesData);

    setupSeriesLabels(series, 'PKG101HNF');

​

    // create second series with mapped data

    series = chart.bar(secondSeriesData);

    setupSeriesLabels(series, 'PKG201HNG');

​

    // create third series with mapped data

    series = chart.bar(thirdSeriesData);

    setupSeriesLabels(series, 'PKR501HNI');

​

    // create fourth series with mapped data

    series = chart.bar(fourthSeriesData);

    setupSeriesLabels(series, 'PKR601HNJ');

​

    // create fourth series with mapped data

    series = chart.bar(fifthSeriesData);

    setupSeriesLabels(series, 'PKR101HNG');

​

    // turn on legend

    chart.legend().enabled(true).fontSize(14).padding([0, 0, 15, 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();

});