chartjs-chart-graph

Appearance

Tree Orientations ​

Horizontal ​

Code ​

ts
export const horizontal: ChartConfiguration<'tree'> = {
  type: 'tree',
  data,
  options: {
    plugins: {
      datalabels: {
        display: false,
      },
    },
    tree: {
      orientation: 'horizontal',
    },
  },
};
ts
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;
      },
    },
  ],
};

Vertical ​

Code ​

ts
export const vertical: ChartConfiguration<'tree'> = {
  type: 'tree',
  data,
  options: {
    plugins: {
      datalabels: {
        display: false,
      },
    },
    tree: {
      orientation: 'vertical',
    },
  },
};
ts
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;
      },
    },
  ],
};

Radial ​

Code ​

ts
export const radial: ChartConfiguration<'tree'> = {
  type: 'tree',
  data,
  options: {
    plugins: {
      datalabels: {
        display: false,
      },
    },
    tree: {
      orientation: 'radial',
    },
  },
};
ts
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;
      },
    },
  ],
};