RoadieRoadie
  • Home
  • Foundations
  • Tokens
  • Components
  • Charts
  • Widgets
  • Appearance
HomeFoundationsComponents
Appearance

Charts

  • Guidelines

    • Data visualisation
    • Dashboard design

  • Layout

    • Dashboard
    • DataCard

  • Data pieces

    • StatTile
    • Meter
    • Sparkline
    • DataTable

  • Chart types

    • LineChart
    • BarChart
    • RankedBars
    • StackedBars
    • Histogram
    • Funnel
    • Heatmap
    • Scatter
    • SmallMultiples

  • Chart parts

    • Chart
    • ChartLegend
    • ChartPatterns
    • ChartTooltip

  • Examples

    • Show dashboard
    • Portfolio dashboard
    • Audience dashboard

RankedBars

Horizontal bars sorted largest first, for channels, places and brackets.

Import

import { RankedBars } from '@oztix/roadie-charts/ranked-bars'

Examples

Default

<div className='w-140 max-w-full'>
  <Chart label='Where buyers came from' source='Oztix sales.' size='md'>
    <RankedBars
      data={[
        { channel: 'Email', orders: 612 },
        { channel: 'Instagram', orders: 388 },
        { channel: 'Direct', orders: 301 },
        { channel: 'Venue site', orders: 164 }
      ]}
      x='channel'
      y='orders'
    />
  </Chart>
</div>

Highlight and Other

Past limit bars, the smallest roll into Other, which always sits last.

<div className='w-140 max-w-full'>
  <Chart label='Where buyers came from' source='Oztix sales.' size='md'>
    <RankedBars
      data={[['Email', 612], ['Instagram', 388], ['Direct', 301], ['Venue site', 164], ['TikTok', 142], ['Google', 97], ['Partner', 33]].map(([channel, orders]) => ({ channel, orders }))}
      x='channel'
      y='orders'
      highlight='Email'
      limit={5}
      takeaway='Email brings in over a third of orders'
    />
  </Chart>
</div>

Share

<div className='w-140 max-w-full'>
  <Chart label='Where buyers live' source='Oztix sales, billing postcodes.' size='md'>
    <RankedBars
      data={[['Fortitude Valley', 205], ['West End', 161], ['Paddington', 132], ['Newstead', 102]].map(([suburb, buyers]) => ({ suburb, buyers }))}
      x='suburb'
      y='buyers'
      share
    />
  </Chart>
</div>

Reference

<div className='w-140 max-w-full'>
  <Chart label='Turn-up' source='Oztix scans.' size='md'>
    <RankedBars
      data={[{ show: 'Friday', attended: 0.94, similar: 0.9 }, { show: 'Saturday', attended: 0.91, similar: 0.92 }, { show: 'Sunday matinee', attended: 0.83, similar: 0.86 }]}
      x='show'
      y='attended'
      format='percent'
      reference={{ field: 'similar', label: 'Similar shows' }}
    />
  </Chart>
</div>

Guidelines

  • Use ranked bars for shares, not a pie. Bars compare more accurately.
  • Report shares, not counts, when totals differ between the things you compare.
  • The table lists every row, including the ones rolled into Other.

Accessibility

  • The plot is one tab stop that starts on the top bar. Up and down arrows move between bars in rank order, and Home and End jump to the first and last.
  • Each bar is read out with its value and, with share, its share of the total.
  • The reference tick is keyed in the legend and read out with each bar.

API reference

RankedBars

dataPlotRow[]
Required

Rows of plain values, one per category.

xstring
Required

Field that names each bar.

ystring
Required

Field for the bar length. Bars always start at zero.

highlightstring | string[]

Categories that tell the story, in the highlight. The rest are context.

format"number" | "compact" | "percent" | "currency" | "compactCurrency" | "points" | "index"

Defaults to 'number', or 'percent' with share.

takeawaystring

The headline sentence. It becomes the plot's accessible name.

limitnumber

Bars shown before the rest roll into Other.

Defaults to 8.

referenceRankedBarsReference

A comparison tick per bar, such as similar shows.

shareboolean

Shows each bar as a percent of the total.

classNamestring
Previous page← BarChartNext pageStackedBars →