BulletChart

Bullet graph: one measured bar against a target tick, on qualitative bands (poor, fair, good). Many rows compare KPIs in little space; each row has its own scale unless scale="shared".

Import

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

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

Usage

<BulletChart
  title="Indicadores de la barbería en octubre"
  items={kpis}
  rangeLabels={["Bajo", "Aceptable", "Bueno"]}
  actualLabel="Actual"
  targetLabel="Meta"
  orientation="horizontal"
  scale="row"
  rowHeight={46}
  valueLabels
  legend
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
items *	readonly BulletItem[]
title *	string		Accessible name of the chart.
description	string
rangeLabels	readonly string[]	[]	Names of the qualitative ranges, lowest first (e.g. “Bajo”, “Medio”, “Alto”).
actualLabel	string	"Actual"
targetLabel	string	"Target"
color	string		Color of the actual bar (default: the brand slot of the palette).
orientation	"horizontal" | "vertical"	"horizontal"
scale	"row" | "shared"	"row"	“row” gives every row its own 0-to-max scale (mixed units); “shared” draws one axis for all.
valueFormat	ValueFormat
rowHeight	number	46	Height of every row in pixels (default 46), horizontal charts without height.
height	number | "fill"		Height in pixels, or "fill" for the parent height.
aspectRatio	number
valueLabels	boolean	true	Actual and target written at the end of each row (default true when there is room).
legend	boolean	true
tooltip	boolean	true
loading	boolean
animate	boolean	true
labels	Partial<ChartLabels>
className	string

* marks a required prop.

Storybook stories

• Default
• Vertical
• Shared Scale
• Without Target
• Loading
• Empty
• Narrow
• Narrow Vertical
• Fill Parent

Source

packages/ui/src/charts/bullet-chart/bullet-chart.tsx