Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

uPlot does not take typed arrays as data

See original GitHub issue

This is a comment I got on stack overflow, when my example failed to render: https://stackoverflow.com/questions/72880591/using-uplot-with-svelte-does-not-render/72881761#72881761

I see that it does take typed arrays in the demo (https://github.com/leeoniya/uPlot/blob/master/demos/area-fill.html), but not when used as an npm package. Which is very confusing 🤔

Another (simpler) example is to use Vite with vanilla js, and the following files:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Vite App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <link rel="stylesheet" href="node_modules/uplot/dist/uPlot.min.css"/>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

main.ts

import uPlot from 'uplot';

let data = [
  new Float32Array([1., 2., 3., 4., 5.]),
  new Float32Array([1., 3., 2., 5., 4.]),
];

const opts = {
  width: 600,
  height: 300,
  scales: {x: {time: false}},
  series: [
      {label: "x"},
      {label: "y", stroke: "red"},
  ],
};

new uPlot(opts, data, document.body);

If I remove Float32Array things get rendered properly. npm installs uplot version 1.6.21`.