JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 300px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  axisX:{
    valueFormatString: 'DD MMM',
    intervalType: 'day',
    interval: 1,
    minimum: new Date(2020, 12,04),
    maximum: new Date(2020, 12,06),
    margin: 30
  },
  axisY: {
    valueFormatString: ' ',
    tickLength: 0,
    margin: 15
  },
  axisY2: {
    margin: 10,
    lineThickness: 0
  },
  toolTip:{
    shared: true
  },
  data: [
    {
      xValueType: "dateTime",
      type: "stackedArea100",
      name: "100+",
      dataPoints: [
        {x: new Date(2020, 12,04), y: 3, p: 0},
        {x: new Date(2020, 12,05), y: 2, p: 0},
        {x: new Date(2020, 12,06), y: 1, p: 0}
      ]
    },
    {
      xValueType: "dateTime",
      type: "stackedArea100",
      name: "21th-100th",
      dataPoints: [
        {x: new Date(2020, 12,04), y: 1, p: 12.5},
        {x: new Date(2020, 12,05), y: 0, p: 12.5},
        {x: new Date(2020, 12,06), y: 1, p: 12.5}
      ]
    },
    {
      xValueType: "dateTime",
      type: "stackedArea100",
      name: "11th-20th",
      dataPoints: [
        {x: new Date(2020, 12,04), y: 1, p: 12.5},
        {x: new Date(2020, 12,05), y: 1, p: 12.5},
        {x: new Date(2020, 12,06), y: 1, p: 12.5}
      ]
    },
    {
      xValueType: "dateTime",
      type: "stackedArea100",
      name: "4th-10th",
      dataPoints: [
        {x: new Date(2020, 12,04), y: 1, p: 12.5},
        {x: new Date(2020, 12,05), y: 1, p: 12.5},
        {x: new Date(2020, 12,06), y: 1, p: 12.5}
      ]
    },
  ]
});
chart.options.data.push( {
  axisYType: "secondary"
});
chart.render();