How can I import external libraries into the code sandbox?

I've been trying to import a library called chart.js to the code sandbox on slate, but even after I read the documentation I was quite doubtful about how the import system works inside the code sandbox, I wish someone could explain me in detail how I do the import of the library, how to call it in the LIBRARY LOCATIONS field and also how to call it in the JAVASCRIPT field inside the code sandbox

Solution

Step-by-step:

Drag-and-drop the JS file in a project or folder of your choice (not in a dataset !)
Choose Upload as a raw file without modifying the extension (recommended) when prompted
Let it upload
You will see the JS file in the project or folder you uploaded it to, you can then select the line representing your file and this should open a right panel, where you can find the path to this file e.g. /myproject/myfolder/myJSlibrary.js
In Slate, add a Code-Sandbox widget
In the configuration of the code Sandbox widget, find at the bottom the LIBRARY LOCATIONS section (see here)
Past the path you found earlier, in an array, like ["/myproject/myfolder/myJSlibrary.js"]

If you need multiple libraries, you should have something like: ["/myproject/myfolder/myJSlibrary.js", "/myproject/myfolder/myOtherJSlibrary.js"]

For the library usage, it depends of course of which kind of problem you hit. But here is a minimal working example.

Library from here Below example from official page

HTML

<canvas id="acquisitions"></canvas>

  const data = [
    { year: 2010, count: 10 },
    { year: 2011, count: 20 },
    { year: 2012, count: 15 },
    { year: 2013, count: 25 },
    { year: 2014, count: 22 },
    { year: 2015, count: 30 },
    { year: 2016, count: 28 },
  ];

new Chart(
    document.getElementById('acquisitions'),
    {
      type: 'bar',
      options: {
        animation: false,
        plugins: {
          legend: {
            display: false
          },
          tooltip: {
            enabled: false
          }
        }
      },
      data: {
        labels: data.map(row => row.year),
        datasets: [
          {
            label: 'Acquisitions by year',
            data: data.map(row => row.count)
          }
        ]
      }
    }
  );

Note: You can see errors related to your lib in the Console tab of your browser's devtools panel.