html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

  // create data set on our data

  var data = [

    {

      assessmentId1: 599,

      assessmentId2: 625,

      bestPolicyCount1: 0,

      bestPolicyCount2: 0,

      bestRiskPercentage1: 0,

      bestRiskPercentage2: 0,

      categoryId1: 1,

      categoryId2: 1,

      categoryName1: "1. Main Document",

      categoryName2: "1. Main Document",

      criticalPolicyCount1: 0,

      criticalPolicyCount2: 0,

      criticalRiskPercentage1: 0,

      criticalRiskPercentage2: 0,

      highPolicyCount1: 0,

      highPolicyCount2: 0,

      highRiskPercentage1: 0,

      highRiskPercentage2: 0,

      lowPolicyCount1: 1,

      lowPolicyCount2: 1,

      lowRiskPercentage1: 100,

      lowRiskPercentage2: 100,

      mediumPolicyCount1: 0,

      mediumPolicyCount2: 0,

      mediumRiskPercentage1: 0,

      mediumRiskPercentage2: 0,

      numberOfAssessedPolicy1: 1,

      numberOfAssessedPolicy2: 1,

      totalPolicies1: 1,

      totalPolicies2: 1

    },

    {

      assessmentId1: 600,

      assessmentId2: 626,

      bestPolicyCount1: 0,

      bestPolicyCount2: 0,

      bestRiskPercentage1: 0,

      bestRiskPercentage2: 0,

      categoryId1: 4,

      categoryId2: 4,

      categoryName1: "4. Main Document",

      categoryName2: "4. Main Document",

      criticalPolicyCount1: 0,

      criticalPolicyCount2: 0,

      criticalRiskPercentage1: 0,

      criticalRiskPercentage2: 0,

      highPolicyCount1: 0,

      highPolicyCount2: 0,

      highRiskPercentage1: 0,

      highRiskPercentage2: 0,

      lowPolicyCount1: 1,

      lowPolicyCount2: 0,

      lowRiskPercentage1: 100,

      lowRiskPercentage2: 0,

      mediumPolicyCount1: 0,

      mediumPolicyCount2: 0,

      mediumRiskPercentage1: 0,

      mediumRiskPercentage2: 0,

      numberOfAssessedPolicy1: 1,

      numberOfAssessedPolicy2: 0,

      totalPolicies1: 1,

      totalPolicies2: 0

    }

  ];

​

  const chartDataArray = [];

​

  for (var objData of data) {

    const barChartDataModel = [

      objData['categoryName1'],

      objData['criticalPolicyCount1'],

      objData['highPolicyCount1'],

      objData['mediumPolicyCount1'],

      objData['lowPolicyCount1'],

      objData['bestPolicyCount1'],

      objData['criticalPolicyCount2'],

      objData['highPolicyCount2'],

      objData['mediumPolicyCount2'],

      objData['lowPolicyCount2'],

      objData['bestPolicyCount2'],

      "#fc7474",

      "#f5a15c",

      "#ffe48f",

      "#6ab6fb",

      '#94b089'

    ];

    chartDataArray.push(barChartDataModel);

  }

​

  console.log(chartDataArray);

  const dataSet = anychart.data.set(chartDataArray);

​

  /** Map data and color of series for first assessment **/

  const seriesData4 = dataSet.mapAs({ 'x': 0, 'value': 4, 'fill': 14 });

​

  /** Map data and color of series for second assessment **/

  const seriesData9 = dataSet.mapAs({ 'x': 0, 'value': 9, 'fill': 14 });

​

  var objChart = anychart.bar();

  objChart.padding([10, 40, 5, 20]);

​

​

  objChart.yScale().minimum(0);

  objChart.yScale().maximum(100);

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

​

  var yScale1 = anychart.scales.linear();

  yScale1.stackMode("percent");

​

  var yScale2 = anychart.scales.linear();

  yScale2.stackMode("percent");

​

  objChart.bar(seriesData4).yScale(yScale1).fill("#6ab6fb").name("Low").stroke(0);

  objChart.bar(seriesData9).yScale(yScale2).fill("#6ab6fb").name("Low").stroke(0);

  objChart.tooltip()

  .format(function() {

    var value = this.value;

    // here calculate the percentage manually according to the known cluster total value

    return 'calculated value';

  });

​

  objChart.container('container').draw();

});