Is there a way to showcase/preview the chart examples from Chart.Js v4.0.1 onto VS Code?

Question

I'm trying to preview the chart examples I was able to acquire from Chart.JS(4.0.1) via GitHub, got the necessary programs installed(Node.JS, PNPM) and I'm using Visual Studio Code to edit the code(as to add in stuff for later).

However I run into the problem that I cannot open the charts as a chart, instead it opens/previews itself as simply code on Visual Studio Code. I tried many extensions, but sofar the ones I use for it are either not compatible with Chart.JS or are too outdated(made in 2019, the latest one for 2022 is 4.0.1 so I presume the coding's different to work it out).

How do I run my Chart.JS code on VS Code as a chart and not just code?

Are there better extensions for VS Code I can use for Chart.JS?

The code from Chart.JS in question:

// <block:actions:2>
const actions = [
  {
    name: 'Randomize',
    handler(chart) {
      chart.data.datasets.forEach(dataset => {
        dataset.data = chart.data.labels.map(() => {
          return [Utils.rand(-100, 100), Utils.rand(-100, 100)];
        });
      });
      chart.update();
    }
  },
];
// </block:actions>

// <block:setup:1>
const DATA_COUNT = 7;
const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [
    {
      label: 'Dataset 1',
      data: labels.map(() => {
        return [Utils.rand(-100, 100), Utils.rand(-100, 100)];
      }),
      backgroundColor: Utils.CHART_COLORS.red,
    },
    {
      label: 'Dataset 2',
      data: labels.map(() => {
        return [Utils.rand(-100, 100), Utils.rand(-100, 100)];
      }),
      backgroundColor: Utils.CHART_COLORS.blue,
    },
  ]
};
// </block:setup>

// <block:config:0>
const config = {
  type: 'bar',
  data: data,
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Chart.js Floating Bar Chart'
      }
    }
  }
};
// </block:config>

module.exports = {
  actions: actions,
  config: config,
};

I hope this helps!

Answer 1

You need to build the samples and open them in your browser.

From the official docs:

Alternatively, you can run them locally. To do so, clone the Chart.js repository from GitHub, run pnpm ci to install all packages, then run pnpm run docs:dev to build the documentation. As soon as the build is done, you can go to localhost:8080/samples to see the samples.