JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="test-plot"></div>
JavaScript
var test = new CanvasJS.Chart("test-plot", {
animationEnabled: true,
title: {
text: "Test",
fontSize: 30,
},
axisY: {
interval: 10,
valueFormatString: "0E0",
logarithmic: true,
logarithmBase: 10,
},
axisX: {
logarithmic: true,
logarithmBase: 10,
},
data: [{
type: "line",
dataPoints: [
{
"x": 3,
"y": 14.0015
},
{
"x": 3.6,
"y": 18.0131
},
{
"x": 4.32,
"y": 20.0786
},
{
"x": 5.184,
"y": 21.6217
},
{
"x": 6.2208,
"y": 22.9048
},
{
"x": 7.46496,
"y": 23.8914
},
{
"x": 8.957952,
"y": 24.474
},
{
"x": 10.749542,
"y": 24.9069
},
{
"x": 12.899451,
"y": 25.25
},
{
"x": 15.479341,
"y": 25.5068
},
{
"x": 18.575209,
"y": 25.6626
},
{
"x": 22.290251,
"y": 25.6978
},
{
"x": 26.748301,
"y": 25.593
},
{
"x": 32.097962,
"y": 25.3344
},
{
"x": 38.517554,
"y": 24.9114
},
{
"x": 46.221065,
"y": 24.3216
},
{
"x": 55.465278,
"y": 23.5701
},
{
"x": 66.558333,
"y": 22.6645
},
{
"x": 79.87,
"y": 21.6173
},
{
"x": 95.844,
"y": 20.4462
},
{
"x": 115.0128,
"y": 19.1727
},
{
"x": 138.01536,
"y": 17.8185
},
{
"x": 165.618432,
"y": 16.4061
},
{
"x": 198.742118,
...