JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer"></div>
<script>
window.onload = () => {
const chart = new CanvasJS.Chart("chartContainer", {
zoomEnabled: true,
zoomType: "xy",
title:{
text: "Zoom Example"
},
data: [
{
type: "line",
markerSize: 0,
lineThickness: 2,
dataPoints: [
{ x: 0, y: 0 },
{ x: 0, y: 10 },
{ x: 10, y: 10 },
{ x: 10, y: 0 },
{ x: 0, y: 0 },
{x: 10, y: 10},
{x:10, y: 0},
{x: 0, y: 10}
]
}],
axisX: {
minimum: 0,
maximum: 10
},
axisY: {
minimum: 0,
maximum: 10
}
});
chart.render();
}
</script>