BarRaceChart

Bar race: horizontal bars that grow, shrink and swap places as time moves through frames. Play/pause, scrub with the slider, topN limits the rows. Under prefers-reduced-motion the bars step from frame to frame.

Import

import { BarRaceChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/bar-chart.

Usage

<BarRaceChart
  title="Citas por barbero esta semana"
  categories={barbers}
  series={[{ id: "citas", name: "Citas", data: appointmentsThisWeek }]}
  valueFormat="integer"
  orientation="vertical"
  stack="none"
  barRadius={6}
  height={300}
  dataLabels={false}
  grid
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
entities *	readonly BarRaceEntity[]
frames *	readonly RaceFrame[]		One entry per moment; values[i] belongs to entities[i].
title *	string		Accessible name of the chart.
description	string
topN	number	6	How many bars race at once (default 6).
frameDuration	number	1400	Milliseconds between two frames (default 1400).
defaultPlaying	boolean	true	Starts playing (default true; reduced motion starts paused).
loop	boolean	true	Starts over after the last frame (default true).
valueFormat	ValueFormat
height	number | "fill"	340
aspectRatio	number
loading	boolean
playLabel	string	"Play"
pauseLabel	string	"Pause"
momentLabel	string	"Moment"	Accessible name of the moment slider.
labels	Partial<ChartLabels>
className	string

* marks a required prop.

Storybook stories

• Default
• Grouped
• Stacked
• Stacked 100%
• Horizontal (top services)
• Horizontal Stacked
• Negative Values
• Annotation (weekly goal)
• Data Labels
• Custom Data Labels
• Distributed (a color per bar)
• Rotated Labels
• Range column (shifts)
• Range bar (service duration)
• Grouped stacked (income vs costs)
• Group labels (quarters)
• Reversed value axis
• Patterns (color-blind friendly)
• Patterned Stacked
• Drilldown
• Race (animated re-sort)
• Loading
• Empty
• Fill Parent
• Narrow

Source

packages/ui/src/charts/bar-chart/bar-race-chart.tsx