JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="chartContainer" style="height: 500px; width: 100%;"><div class="canvasjs-chart-container" style="position: relative; text-align: left; cursor: auto;"><canvas class="canvasjs-chart-canvas" width="491" height="500" style="position: absolute; user-select: none;"></canvas><canvas class="canvasjs-chart-canvas" width="491" height="500" style="position: absolute; -webkit-tap-highlight-color: transparent; user-select: none; cursor: default;"></canvas><div class="canvasjs-chart-toolbar" style="position: absolute; right: 1px; top: 1px; border: 1px solid transparent;"></div><div class="canvasjs-chart-tooltip" style="position: absolute; height: auto; box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 2px 2px; z-index: 1000; pointer-events: none; display: none; border-radius: 0px; left: 62px; bottom: -321.976px; transition: left 0.1s ease-out 0s, bottom 0.1s ease-out 0s;"><div style="width: auto; height: auto; min-width: 50px; margin: 0px; padding: 5px; font-family: &quot;Trebuchet MS&quot;, Helvetica, sans-serif; font-weight: normal; font-style: normal; font-size: 14px; color: black; text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 1px; text-align: left; border: 1px solid rgb(79, 129, 188); background: rgba(255, 255, 255, 0.9); text-indent: 0px; white-space: nowrap; border-radius: 0px; user-select: none;">Tax Rate 0.8400<hr>Revenue: 68,158,382</div></div><a class="canvasjs-chart-credit" title="JavaScript Charts" style="outline:none;margin:0px;position:absolute;right:2px;top:486px;color:dimgrey;text-decoration:none;font-size:11px;font-family: Calibri, Lucida Grande, Lucida Sans Unicode, Arial, sans-serif" tabindex="-1" target="_blank" href="https://canvasjs.com/">CanvasJS.com</a></div></div>

JavaScript

window.onload = function () {

  var chart = new CanvasJS.Chart("chartContainer", {
    title:{
      text: "M&O Revenue at Alternative Tax Rates"
    },
    axisX:{
      title: "Tax Rates",
      interval: 0.01,
      intervalType: "number",
      labelFormatter: function(e){
        return CanvasJS.formatNumber(e.value, "0.00");
      },
      stripLines:[{
        startValue: .83,
        endValue: 0.9100001,
        color: "#C7BD0A",
        label: "Golden Pennies",
        labelFontColor: "#000000",
        labelBackgroundColor: "#C7BD0A"
      },{
        startValue:0.91,
        endValue:1,
        color: "#C7880A",
        label: "Copper Pennies",
        labelFontColor: "#000000",
        labelBackgroundColor: "#C7880A"
      },{
        value:.83,
        color: "#000000",
        label: "Tier 1 Rate",
        labelFontColor: "#000000",
        labelBackgroundColor: "#FFFFFF"
      },{
        value:0.9359,
        color: "#000000",
        label: "ATR Used in Run",
        labelFontColor: "#000000",
        labelAlign: "near"
      },{
        value:1,
        color: "#000000",
        label: "Maximum M&O Rate",
        labelFontColor: "#000000",
        labelBackgroundColor: "#C7880A"
      }]
    },
    axisY:{
      title: "Revenue",
      titleFontColor: "#4F81BC",
      lineColor: "#4F81BC",
      labelFontColor: "#4F81BC",
      tickColor: "#4F81BC",
      minimum: 60000000,
      maximum: 90000000	},
    legend:{
      cursor: "pointer",
      dockInsidePlotArea: true,
      itemclick: toggleDataSeries
    },
    data: [{
      type: "line",
      name: "Revenue",
      xValueFormatString: "0.0000",
      toolTipContent: "Tax Rate {x}<hr/>{name}: {y}",
      showInLegend: false,
      dataPoints: [
        { "x": 0.83, "y": 67103938 },
        { "x": 0.84, "y": 68157650 },
        { "x": 0.85, "y": 69211361 },
        { "x": 0.86, "y": 70265073 },
        { "x": 0.87, "y": 71318786 },
        { "x": 0.88, "y": 72372498 },
        { "x": 0.89,...