Examples

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,
    },
  ],
};

Dendrogram

Code

config

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

data

import nodes from './tree.json';

export const data: ChartConfiguration<'dendrogram'>['data'] = {
  labels: nodes.map((d) => d.name),
  datasets: [
    {
      pointBackgroundColor: 'steelblue',
      pointRadius: 5,
      data: nodes.map((d) => Object.assign({}, d)),
    },
  ],
};

Tree

Code

config

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

data

import nodes from './tree.json';

export const data: ChartConfiguration<'tree'>['data'] = {
  labels: nodes.map((d) => d.name),
  datasets: [
    {
      pointBackgroundColor: 'steelblue',
      pointRadius: 5,
      data: nodes.map((d) => Object.assign({}, d)),
      edgeLineBorderWidth: (ctx) => {
        return ctx.dataIndex;
      },
    },
  ],
};