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: "Custom toolTip function "
  },
  toolTip: {	
    shared: true,
    contentFormatter: contentFormatter
  },
  axisX: {
    logarithmic: true
  },
  axisY: {
    includeZero: false
  },
  axisY2: {
    includeZero: false
  },
  data: [
    {
      type: "line",
      showInLegend: true,
      name: "Visits",
      dataPoints: [
        { x: 1000, y: 650 },
        { x: 10000, y: 700 },
        { x: 100000, y: 710 },
        { x: 1000000000, y: 658 },
        { x: 1000000000000, y: 734 },
        { x: 10000000000000, y: 963 },
        { x: 1000000000000000, y: 847 }
      ]
    },
    {
      type: "line",
      showInLegend: true,
      name: "Visits",
      axisYType: "secondary",     
      dataPoints: [
        { x: 1000, y: 4500 },
        { x: 10000, y: 3900 },
        { x: 100000, y: 3210 },
        { x: 1000000000, y: 3608 },
        { x: 1000000000000, y: 3734 },
        { x: 10000000000000, y: 2163 },
        { x: 1000000000000000, y: 2247 }
      ]
    },
  ]
});
chart.render();

function contentFormatter(e){
  var content = " ";
  for (var i = 0; i < e.entries.length; i++) {
    var hashrate = e.entries[i].dataPoint.x;
    if (hashrate < 1000000) {    
      content += (Math.round(hashrate / 1000) / 1000 ).toFixed(2)+' Sol/s';
      content += "<br/>";
    }
    else {
      var byteUnits = [ ' Sol/s', ' KSol/s', ' MSol/s', ' GSol/s', ' TSol/s', ' PSol/s' ];
      var j = Math.floor((Math.log(hashrate/1000) / Math.log(1000)) - 1);
      hashrate = (hashrate/1000) / Math.pow(1000, j + 1);
      content += hashrate.toFixed(2) + byteUnits[j];
      content += "<br/>";
    }
  }
  return content;
}