JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
function getSubscriptString(value) {
if (value == 0) {
return 0;
}
var unicodeStringForSubscript = ["\u2070", "\u00B9", "\u00B2", "\u00B3", "\u2074", "\u2075", "\u2076", "\u2077", "\u2078", "\u2079"];
var subscriptValue = Math.round(Math.log10(value));
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)];
}
function fnGetPowerValue(value) {
var powVal = Math.round(Math.log10(value));
var result = (value * Math.pow(10, Math.abs(powVal))).toFixed(1);
result = parseFloat(result.substring(1, 3)) < 0.5 ? Math.floor(result) : result.substring(0, 1) + ".5";
return result + 'x' + 10 + getSubscriptString(value);
}
var striplineVal = [],
yaxisvalues = [];
striplineVal.push({
color: "black",
value: 0
})
yaxisvalues.push({
gridThickness: 0,
interval: 2,
labelFontFamily: " \"Noto Sans\", sans-serif",
labelFontSize: 12,
lineColor: "black",
maximum: 6.329925589521708,
minimum: -4.6517328573928545,
stripLines: striplineVal,
title: "OCR (pmol/min)",
titleFontColor: "black",
titleFontSize: 12,
titleMaxWidth: undefined
});
window.onload = function() {
var chart = new CanvasJS.Chart("chartContainer", {
exportEnabled: true,
zoomEnabled: true,
zoomType: "xy",
exportFileName: 'Line chart',
title: {
text: ""
},
dataPointWidth: 15,
axisY: yaxisvalues,
axisX: {
title: 'Dose (M)',
titleFontColor: "black",
minimum: 0.00001,
maximum: 0.001,
labelFontFamily: ' "Noto Sans", sans-serif',
interval: '',
titleFontSize: 12,
labelFontSize: 12,
tickLength: 13,
lineColor: "black",
lineThickness: 0.7,
labelBackgroundColor:...