JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",{
  title:{
    text: "Grouped Stacked Chart"
  },
  theme: "theme3",
  axisY: {
    maximum: 15
  },
  axisY2: {
    maximum: 15,
    lineThickness: 0,    
    tickLength: 0,
    labelFormatter: function(e){
      return "";
    }
  },
  legend: {
    verticalAlign: "center",
    horizontalAlign: "right"
  },

  data: [
    {
      type: "stackedColumn",
      showInLegend: true,
      name:"series1",
      dataPoints: [
        { x: 1, y: 6, label:"Apple" },
        { x: 2, y: 2, label:"Mango" },
        { x: 3, y: 5, label:"Orange" },
        { x: 4, y: 7, label:"Banana" },
        { x: 5, y: 1, label:"Pineapple" },
        { x: 6, y: 5, label:"Pears" }					
      ]
    },
    {
      type: "stackedColumn",
      showInLegend: true,
      name:"series2",
      indexLabel: "#total",
      indexLabelPlacement: "outside",
      dataPoints: [
        { x: 1, y: 7, label:"Apple" },
        { x: 2, y: 4, label:"Mango" },
        { x: 3, y: 7, label:"Orange" },
        { x: 4, y: 5, label:"Banana" },
        { x: 5, y: 2, label:"Pineapple" },
        { x: 6, y: 7, label:"Pears" }					
      ]
    },
    {
      type: "stackedColumn",
      showInLegend: true,
      name:"series3",
      axisYType: "secondary",
      dataPoints: [
        { x: 1, y: 4, label:"Apple" },
        { x: 2, y: 1, label:"Mango" },
        { x: 3, y: 2, label:"Orange" },
        { x: 4, y: 3, label:"Banana" },
        { x: 5, y: 1, label:"Pineapple" },
        { x: 6, y: 3, label:"Pears" }					
      ]
    },
    {
      type: "stackedColumn",
      showInLegend: true,
      name:"series4",
      axisYType: "secondary",
      indexLabel: "#total",
      indexLabelPlacement: "outside",
      dataPoints: [
        { x: 1, y: 5, label:"Apple" },
        { x: 2, y: 1, label:"Mango" },
        { x: 3, y: 2, label:"Orange" },
        { x: 4, y: 3, label:"Banana" },
        { x: 5, y: 1, label:"Pineapple" },
        { x: 6, y: 3, label:"Pears" }					
 ...