Force Directed Graph

Code

config

export const config: ChartConfiguration<'forceDirectedGraph'> = {
  type: 'forceDirectedGraph',
  data,
  options: {
    plugins: {
      datalabels: {
        display: false,
      },
    },
  },
};

data

import miserables from './miserables.json';
export const data: ChartConfiguration<'forceDirectedGraph'>['data'] = {
  labels: miserables.nodes.map((d) => d.id),
  datasets: [
    {
      pointBackgroundColor: 'steelblue',
      pointRadius: 5,
      data: miserables.nodes,
      edges: miserables.links,
    },
  ],
};