demo D252

Calendar heatmap

A year of daily figures as one square per day, so busy runs and quiet spells stand out

type: 'calendar', x, y

Building…

Loading a live grid…

The configuration

'chart-types-calendar': () => ({
  rows: [], config: {},
  foot: ['one square per day, a year across', 'the darker the square, the busier the day'],
  mount: mountGridCharts({
    rows: dailyRows(),
    columns: [
      { field: 'date', title: 'Date', type: 'dateString', layout: { pin: 'start', width: 140 } },
      { field: 'orders', title: 'Orders', type: 'number', total: 'sum' },
    ],
    columnsPer: 1, chartHeight: 240,
    chartTypeModules: ['calendar'],
    charts: [{ type: 'calendar', x: 'date', y: 'orders', title: 'Orders through the year' }],
  }),
}),