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"]
  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 + unicodeStringForSubscript[Math.ceil(Math.log(e.value)/Math.log(10))] ;
      }
    },
    data: [{
      type: "line",
      dataPoints: [
        { x: 10, y: 71 },
        { x: 100, y: 55 },
        { x: 1000, y: 50 },
        { x: 10000, y: 65 },
        { x: 100000, y: 95 },
        { x: 1000000, y: 68 }
      ]
    }]
  });
  chart.render();
}