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 now = Math.floor(Date.now() / 1e3);
let hr = 3600;

const data = [
  Array.from(
    {
      length: 5,
    },
    (v, i) => now + i * hr
  ),
  [null, 3, 2, null, null],
  [null, null, 1, 2, null],
];

const opts = {
  width: 800,
  height: 400,
  series: [{},
    {
      stroke: 'blue',
      spanGaps: true,
    },
    {
      stroke: 'red',
      spanGaps: true,
    },
  ],
};

const optsTicksFormatted = {
  width: 800,
  height: 400,
  series: [{},
    {
      stroke: 'blue',
      spanGaps: true,
    },
    {
      stroke: 'red',
      spanGaps: true,
    },
  ],
  axes: [
  	{},
    {
    	values: (self, ticks) => ticks.map(v => v.toFixed(0))
    }
  ]
};

const optsNoUnusedTicks = {
  width: 800,
  height: 400,
  series: [{},
    {
      stroke: 'blue',
      spanGaps: true,
    },
    {
      stroke: 'red',
      spanGaps: true,
    },
  ],
  scales: {
  	y: {
      time: false,
      distr: 2,
    },
  },
};

let plot1 = new uPlot(opts, data, document.body);
let plot2 = new uPlot(optsTicksFormatted, data, document.body);
let plot3 = new uPlot(optsNoUnusedTicks, data, document.body);