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

window.onload = function () {
  var unicodeStringForSubscript = ["\u2070", "\u00B9", "\u00B2", "\u00B3", "\u2074", "\u2075", "\u2076", "\u2077", "\u2078", "\u2079"];

  function getSubscriptString(value) {
    var subscriptValue = Math.ceil(Math.log(value)/Math.log(10));

    //Handling double digit numbers
    if(subscriptValue > 9 || subscriptValue < -9) {
      return (subscriptValue < -9 ? "\u207B" : "") + (Math.abs(subscriptValue)+"").split('').reduce(
        function(prevVal,val) {
          return prevVal + unicodeStringForSubscript[val];
        }, "")
    }
    
    return (subscriptValue < 0 ? "\u207B": "") + unicodeStringForSubscript[Math.abs(subscriptValue)];


  }
  var chart = new CanvasJS.Chart("chartContainer",{
    title:{
      text: "Line Chart with Logarithm Base 10"
    },              
    axisX:{
      title: "Logarithmic Axis",
      logarithmic: true,
      logarithmBase: 10,
      labelFormatter: function(e) {
        return 10 + getSubscriptString(e.value);
      }
    },
    data: [{
      type: "line",
      dataPoints: [
        { x: .00000000001, y: 41 },
        { x: .00001, y: 31 },
        { x: 10, y: 71 },
        { x: 100, y: 55 },
        { x: 1000, y: 50 },
        { x: 10000, y: 65 },
        { x: 100000, y: 95 },
        /* { x: 1000000, y: 68 },
        { x: 1000000000, y: 18 },
        { x: 100000000000, y: 18 } */
      ]
    }]
  });
  chart.render();
}