JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
JavaScript
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
axisY: {},
data: [
{
type: "scatter",
dataPoints: [
{ x: 10000, y: 950 },
{ x: 11000, y: 1265 },
{ x: 13000, y: 1250 },
{ x: 15000, y: 1284 },
{ x: 18000, y: 1750 },
{ x: 19000, y: 1761 }
]
}
]
});
chart.render();
var yMax = -Infinity, yMin = Infinity;
for (let i = 0; i < chart.options.data[0].dataPoints.length; i++) {
yMax = Math.max(chart.options.data[0].dataPoints[i].y, yMax);
yMin = Math.min(chart.options.data[0].dataPoints[i].y, yMin);
}
chart.axisY[0].set("maximum", chart.axisY[0].convertPixelToValue(chart.axisY[0].convertValueToPixel(yMax) - chart.data[0].get("markerSize")/2), false);
chart.axisY[0].set("minimum", yMin <= chart.axisY[0].get('minimum') ? chart.axisY[0].convertPixelToValue(chart.axisY[0].convertValueToPixel(yMin) + chart.data[0].get("markerSize")/2) : chart.axisY[0].get('minimum'));
if(yMax % chart.axisY[0].get("interval") != 0)
chart.axisY[0].set("stripLines", [{value: yMax, color: "grey", label: CanvasJS.formatNumber(yMax, chart.axisY[0].get("valueFormatString")), labelPlacement: "outside", labelBackgroundColor: chart.axisY[0].get("labelBackgroundColor"), labelFontColor: chart.axisY[0].get("labelFontColor") }]);
}