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

StackedBars

Bars split into segments, as counts or stacked to 100%.

Import

import { StackedBars } from '@oztix/roadie-charts/stacked-bars'

Examples

Default

<div className='w-140 max-w-full'>
  <Chart label='Ticket type mix' source='Oztix sales.' size='md'>
    <StackedBars
      data={[['Friday', 'GA', 1210], ['Friday', 'VIP', 232], ['Saturday', 'GA', 1480], ['Saturday', 'VIP', 310], ['Sunday', 'GA', 640], ['Sunday', 'VIP', 96]].map(([show, type, sold]) => ({ show, type, sold }))}
      x='show'
      y='sold'
      series='type'
    />
  </Chart>
</div>

Share

<div className='w-140 max-w-full'>
  <Chart label='Presale and general' source='Oztix sales.' size='md'>
    <StackedBars
      data={[['The Lantern Room', 'Presale', 820], ['The Lantern Room', 'General', 644], ['Harbourside Hall', 'Presale', 310], ['Harbourside Hall', 'General', 1190]].map(([show, phase, sold]) => ({ show, phase, sold }))}
      x='show'
      y='sold'
      series='phase'
      mode='share'
      highlight='Presale'
    />
  </Chart>
</div>

Vertical

<div className='w-140 max-w-full'>
  <Chart label='Resale share' source='Oztix resale.' size='md'>
    <StackedBars
      data={['Sep', 'Oct', 'Nov'].flatMap((month, i) => [{ month, kind: 'Resold', tickets: 40 + i * 25 }, { month, kind: 'Kept', tickets: 1400 - i * 25 }])}
      x='month'
      y='tickets'
      series='kind'
      mode='share'
      orientation='vertical'
    />
  </Chart>
</div>

Guidelines

  • Two or three segments use the pair and trio sets, so ticket types keep the same colours everywhere.
  • Segments stack and take colours in the order they first appear in the data. Put the segment that matters most first.
  • Past 6 segments, the smallest roll into Other, which always stacks last. The table keeps a column for every segment.

Accessibility

  • The plot is one tab stop. Keys follow the bars as drawn:
    • Horizontal bars: up and down move between bars, and left and right move between the segments of a bar.
    • Vertical bars: left and right move between bars, and up and down move between the segments of a bar.
  • Each segment is read out with its value and, in share mode, its share of the bar.
  • Under forced colours and in print, each segment switches to its own texture.

API reference

StackedBars

dataPlotRow[]
Required

Rows of plain values, one per category and segment.

xstring
Required

Field that names each bar.

ystring
Required

Field for the segment size.

seriesstring
Required

Field that names each segment. Past 6, the smallest roll into Other.

highlightstring | string[]

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

palette"categorical" | "pair" | "trio"

Defaults to 'categorical', or the pair or trio set at 2 or 3 segments.

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

Defaults to 'number'.

takeawaystring

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

mode"count" | "share"

`share` stacks every bar to 100%.

Defaults to 'count'.

orientation"horizontal" | "vertical"

Defaults to 'horizontal'.

classNamestring
Previous page← RankedBarsNext pageHistogram →