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",{
  theme: "light2",

  legend: {
    fontFamily: "arial",
    fontSize: 15,
  },
  axisY:{
    includeZero: false,
    interval: 2
  },    
  data: [
    {
      type: "bubble",
      indexLabel: "{y}%",
      color: 'blue',
      indexLabelFontSize: 16,
      indexLabelFontColor: "white",
      markerColor: "blue",
      toolTipContent: "{label}: {y}",
      dataPoints: [
        { label: 'SEP', y: 92, z:30},
        { label: 'OCT', y: 88, z:30},
        { label: 'NOV', y: 86, z:30},
        { label: 'DEC', y: 97, z:30},
      ]
    },
    {
      type: "bubble",
      indexLabel: "{y}%",
      color: 'orange',
      indexLabelFontSize: 16,
      indexLabelFontColor: "white",
      markerColor: "orange",
      toolTipContent: "{label}: {y}",
      dataPoints: [
        { label: 'SEP', y: 95, z:30},
        { label: 'OCT', y: 95, z:30},
        { label: 'NOV', y: 95, z:30},
        { label: 'DEC', y: 95, z:30},
      ]
    },
    {        
      type: "line",
      lineDashType: "dash",
      lineColor: "blue",
      color:'blue',
      markerSize: 0,
      highlightEnabled: false,
      toolTipContent: null,
      dataPoints: [
        { label: 'SEP', y: 92 },
        { label: 'OCT', y: 88 },
        { label: 'NOV', y: 86 },
        { label: 'DEC', y: 97 }
      ]
    },
    {        
      type: "line",
      lineDashType: "dash",
      lineColor: "orange",
      color:'orange',
      markerSize: 0,
      highlightEnabled: false,
      toolTipContent: null,
      dataPoints: [
        { label: 'SEP', y: 95 },
        { label: 'OCT', y: 95 },
        { label: 'NOV', y: 95 },
        { label: 'DEC', y: 95 }
      ]
    }
  ]
});

chart.render();