JSFiddle - React, Tailwind, and code Playground

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" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Creating Shapes using Range Area Chart"
  },
  axisX: {
    interval:1,
  },
  data: [
    {
      type: "rangeArea",
      toolTipContent: null,
      markerSize: 0,
      highlightEnabled: false,
      lineThickness: 0,
      dataPoints: [
        {
          "x": 0.47631006482711663,
          "y": [
            0.2150274182003726,
            0.4
          ]
        },
        {
          "x": 0.4613932930357765,
          "y": [
            0.21447902477651679,
            0.4
          ]
        },
        {
          "x": 0.4575541657067365,
          "y": [
            0.2345577908938399,
            0.4
          ]
        },
        {
          "x": 0.44817455675966034,
          "y": [
            0.24224655248797608,
            0.4
          ]
        },
        {
          "x": 0.43154466411776793,
          "y": [
            0.2312850801930392,
            0.4
          ]
        },
        {
          "x": 0.42236777190683344,
          "y": [
            0.22365012044735139,
            0.4
          ]
        },
        {
          "x": 0.4091659462916203,
          "y": [
            0.2171038693523069,
            0.4
          ]
        },
        {
          "x": 0.3981209917509766,
          "y": [
            0.20505837240334615,
            0.4
          ]
        },
        {
          "x": 0.38683316331154727,
          "y": [
            0.19654419594438605,
            0.4
          ]
        },
        {
          "x": 0.3822715087616231,
          "y": [
            0.1947346496304153,
            0.4
          ]
        },
        {
          "x": 0.38765698855916103,
          "y": [
            0.21185001664817607,
            0.4
          ]
        },
        {
          "x": 0.37600088182836194,
          "y": [
            0.22009555534127676,
            0.4
          ]
        },
        {
          "x": 0.37725279872192213,
          "y": [
          ...