Histogram

How a number spreads, such as booking lead time or tickets per order.

Import

import { Histogram } from '@oztix/roadie-charts/histogram'

Examples

Default

<div className='w-140 max-w-full'>
  <Chart label='Booking lead time' source='Oztix sales.' size='md'>
    <Histogram
      data={[1, 2, 3, 3, 4, 5, 6, 8, 9, 10, 12, 13, 14, 16, 18, 21, 25, 30, 38, 45, 60].map((days) => ({ days }))}
      x='days'
      binWidth={7}
      median
      takeaway='Half of buyers book within two weeks of the show'
    />
  </Chart>
</div>

Order size

<div className='w-140 max-w-full'>
  <Chart label='Tickets per order' source='Oztix sales.' size='md'>
    <Histogram data={[1, 2, 2, 2, 2, 3, 4, 4, 2, 1, 6, 2].map((tickets) => ({ tickets }))} x='tickets' binWidth={1} takeaway='Half of orders are for two tickets' />
  </Chart>
</div>

Guidelines

• Use binWidth when the unit means something, such as 7 days. Use bins for a quick look. It sets a target, so edges stay round and the last bin takes a maximum that lands on its top edge. Don't set both.
• Bins start on round numbers, and there are never more than 50. Whole numbers get whole bins, named by the values they hold, such as "1 ticket" or "7 to 13 days".
• median draws a labelled dashed line. Say what it means in the takeaway.
• Counts start at zero.

Accessibility

• The plot is one tab stop. Left and right arrows move between bins, and each bin is read out as a range and its count, such as "7 to 13 days, 5 of 21".
• The Table tab lists every bin with its count.