SimpleHorizontalBarChart

When to use

Widget dashboards with a handful of categories (top sellers, division mix).

When NOT to use

Time series or large datasets — use a dedicated charting library.

Podium primitives composed

• Podium Text

Props

Auto-generated from src/components/SimpleHorizontalBarChart/SimpleHorizontalBarChart.types.ts. Do not edit by hand. Run pnpm docs:props after changing source JSDoc.

SimpleHorizontalBarChartProps

Prop	Type	Required	Description
animate	boolean	No	Animate bar widths on mount via a CSS transition. Default: true
barHeight	number	No	Explicit bar height in pixels. Overrides barSize when provided.
barSize	'regular' | 'wide'	No	Preset bar thickness. - "regular" — slim (6 px), suitable for compact UIs or dashboards with many rows. - "wide" — thick (14 px), suitable for featured metrics or standalone cards. Default: "regular"
color	string	No	Color applied to all bars. Accepts any CSS color string. Defaults to the first color in the Nike series palette for the active theme mode. Per-item color values override this.
data	SimpleHorizontalBarChartItem[]	Yes	Data rows to render
formatValue	(value: number) => string	No	Custom value formatter. Default: (v) => v.toLocaleString()
initialVisibleRows	number	No	Maximum number of rows to show before revealing an expand toggle. Set to undefined or Infinity to always show all rows. Default: 5
labelWidth	number	No	Minimum width (in px) reserved for the label column. Increase if your labels are long. Default: 80
maxValue	number	No	The value that maps to a 100% wide bar. Defaults to the maximum value in data.
showValues	boolean	No	Show the formatted value at the end of each row. Default: true
title	string	No	Section heading rendered above the chart. Uses the overline typography style (uppercase, spaced).

Examples

Top categories

import { SimpleHorizontalBarChart } from '@nike/whisker-component-library';

<SimpleHorizontalBarChart
  items={[
    { label: 'Running', value: 420 },
    { label: 'Training', value: 310 },
  ]}
  maxValue={500}
/>;

Live playground