JSFiddle - React, Tailwind, and code Playground

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer"></div>

CSS

#chartContainer {
  height: 130px;
  width: 268px;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  axisY: {
    title: "This is a pretend title"
  },
  axisX: {
    title: "This is a pretend title"
  },
  data: [
    {
      type: "stackedColumn",
      name: "dataset 1 alphabet",
      showInLegend: true, 
      dataPoints: [
        { label: "label example 10", y: 71 },
        { label: "label example 20", y: 55 },
        { label: "label example 30", y: 50 },
        { label: "label example 40", y: 65 },
        { label: "label example 50", y: 95 },
        { label: "label example 60", y: 68 },
        { label: "label example 70", y: 28 },
        { label: "label example 80", y: 34 },
        { label: "label example 90", y: 14 }
      ]
    },		
    {
      type: "stackedColumn",
      name: "dataset 2 alphabet",
      showInLegend: true, 
      dataPoints: [
        { label: "label example 10", y: 17 },
        { label: "label example 20", y: 55 },
        { label: "label example 30", y: 5 },
        { label: "label example 40", y: 56 },
        { label: "label example 50", y: 59 },
        { label: "label example 60", y: 86 },
        { label: "label example 70", y: 82 },
        { label: "label example 80", y: 43 },
        { label: "label example 90", y: 41 }
      ]
    },	
    {
      type: "stackedColumn",
      name: "dataset 3 alphabet",
      showInLegend: true, 
      dataPoints: [
        { label: "label example 10", y: 10 },
        { label: "label example 20", y: 50 },
        { label: "label example 30", y: 50 },
        { label: "label example 40", y: 50 },
        { label: "label example 50", y: 50 },
        { label: "label example 60", y: 80 },
        { label: "label example 70", y: 80 },
        { label: "label example 80", y: 40 },
        { label: "label example 90", y: 40 }
      ]
    },		
    {
      type: "stackedColumn",
      name: "dataset 4 alphabet",
      showInLegend: true, 
      dataPoints: [
        { label: "label example 10", y: 15 },
        { label: "label example...