JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://leeoniya.github.io/uPlot/src/uPlot.css">
<script src="https://leeoniya.github.io/uPlot/dist/uPlot.iife.js"></script>

JavaScript

let data = [
  [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
  [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
];

const X_RANGE_MIN = 0.4;
const X_RANGE_MAX = 0.6;
const Y_RANGE_MIN = 40;
const Y_RANGE_MAX = 60;

const opts = {
  width: 800,
  height: 400,
  title: "Trendlines",
  scales: {
    x: {
      time: false,
      range: (u, min, max) => {
      	console.log('X min:', min, 'max:', max);
      	const finalMin = min > X_RANGE_MIN ? min : X_RANGE_MIN;
        const finalMax = max < X_RANGE_MAX ? max : X_RANGE_MAX;
      	return [finalMin, finalMax]
      }
    },
    y: {
    	time: false,
      range: (u, min, max) => {
      	console.log('Y min:', min, 'max:', max);
        const finalMin = min > Y_RANGE_MIN ? min : Y_RANGE_MIN;
        const finalMax = max < Y_RANGE_MAX ? max : Y_RANGE_MAX;
				return [finalMin, finalMax]
      }
    }
  },
  cursor: {
  	drag: {
    	x: true,
      y: true,
    },
  },
  series: [
    {},
    {
      width: 3,
      label: "Data 1",
      stroke: "red",
      fill: "rgba(255,0,0,0.1)",
      gaps: (u, ...args) => {
        return args[3];
      }
    },
  ],
};

let u = new uPlot(opts, data, document.body);