demo D256

Fan chart

An actual line that opens into a forecast band, widening the further ahead it reaches

type: 'fan', x, y, forecast, lower, upper

Building…

Loading a live grid…

The configuration

'chart-types-fan': () => ({
  rows: [], config: {},
  foot: ['a solid line for what happened', 'a band that widens the further ahead the forecast reaches'],
  mount: mountGridCharts({
    rows: forecastRows(),
    columns: [
      { field: 'month', title: 'Month', layout: { pin: 'start', width: 110 } },
      { field: 'actual', title: 'Actual', type: 'number' },
      { field: 'forecast', title: 'Forecast', type: 'number' },
      { field: 'lower', title: 'Lower', type: 'number' },
      { field: 'upper', title: 'Upper', type: 'number' },
    ],
    columnsPer: 1, chartHeight: 340,
    chartTypeModules: ['fan'],
    charts: [{ type: 'fan', x: 'month', y: 'actual', forecast: 'forecast', lower: 'lower', upper: 'upper', title: 'Actuals, then a forecast with its range' }],
  }),
}),