Lattice Grid Buy a licence

demo D255

Dumbbell chart

Two dots joined by a bar per row, so the distance from before to after is the picture

type: 'dumbbell', x, start, end

Building…
Loading a live grid…

The configuration

'chart-types-dumbbell': () => ({
  rows: [], config: {},
  foot: ['two dots a row, joined by a bar', 'the bar is the change from before to after'],
  mount: mountGridCharts({
    rows: beforeAfterRows(),
    columns: [
      { field: 'route', title: 'Route', layout: { pin: 'start', width: 140 } },
      { field: 'before', title: 'Before (ms)', type: 'number', total: 'avg' },
      { field: 'after', title: 'After (ms)', type: 'number', total: 'avg' },
    ],
    columnsPer: 1, chartHeight: 320,
    chartTypeModules: ['dumbbell'],
    charts: [{ type: 'dumbbell', x: 'route', start: 'before', end: 'after', title: 'Load time, before and after' }],
  }),
}),