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
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' }],
}),
}),