demo D254

Diverging bars

Gains one way and losses the other off a shared centre, so direction reads before size

type: 'diverging', x, y

Building…

Loading a live grid…

The configuration

'chart-types-diverging': () => ({
  rows: [], config: {},
  foot: ['bars grow right for a gain, left for a loss', 'read off one centre line'],
  mount: mountGridCharts({
    rows: netChangeRows(),
    columns: [
      { field: 'category', title: 'Line of business', layout: { pin: 'start', width: 170 } },
      { field: 'net', title: 'Net change', type: 'number', total: 'sum' },
    ],
    columnsPer: 1, chartHeight: 340,
    chartTypeModules: ['diverging'],
    charts: [{ type: 'diverging', x: 'category', y: 'net', title: 'Net change by line of business' }],
  }),
}),