demo D249

Arc diagram

Lay every node on one line and join related pairs with an arc, so the links read at a glance

type: 'arc', source, target, value

Building…

Loading a live grid…

The configuration

'chart-types-arc': () => ({
  rows: [], config: {},
  foot: ['every service sits on one line', 'an arc joins a caller to what it calls'],
  mount: mountGridCharts({
    rows: callRows(),
    columns: [
      { field: 'source', title: 'From', layout: { pin: 'start', width: 130 }, filter: { type: 'set' } },
      { field: 'target', title: 'Calls', filter: { type: 'set' } },
      { field: 'calls', title: 'Calls / min', type: 'number', total: 'sum' },
    ],
    columnsPer: 1, chartHeight: 320,
    chartTypeModules: ['arc'],
    charts: [{ type: 'arc', source: 'source', target: 'target', value: 'calls', title: 'Which service calls which' }],
  }),
}),