FillGaugeChart

Silhouettes filled to a level: stock left in a bottle, a battery of capacity, a droplet of water, a target reached. Several gauges sit side by side for comparisons and wrap to new rows in narrow containers. The value inside switches color where the liquid crosses it, so it reads on both.

Import

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

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

Usage

<FillGaugeChart
  title="Stock de productos (unidades)"
  data={stock}
  shape="bottle"
  level="wave"
  minItemWidth={104}
  height={200}
  animate
  loading={false}
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
title *	string
description	string
data *	readonly FillGaugeItem[]
shape	UnitIcon	"droplet"	Built-in shape (“battery”, “droplet”, “bottle”, “person”, “target”, “shield”, …) or your own.
max	number	1	Value of a full shape (1 for fractions, 100 for percentages, 24 for a box of 24 bottles).
level	"flat" | "wave"	"wave"	“wave”: a moving liquid surface; “flat”: a still level. Shapes that fill sideways are always flat.
valueFormat	ValueFormat		Format of the label inside the shape. By default the fill share (“75%”).
minItemWidth	number	104	Smallest width of one gauge; more gauges than fit wrap to new rows.
height	number | "fill"	200
aspectRatio	number		Width / height ratio; sizes the gauges from the container width.
animate	boolean	true
loading	boolean	false
labels	Partial<ChartLabels>
className	string

* marks a required prop.

Storybook stories

• Default
• Droplet
• Battery (fills sideways)
• Mixed shapes (person, target, shield)
• Raw value labels, flat level
• Custom SVG shape
• Loading
• Empty
• Narrow

Source

packages/ui/src/charts/fill-gauge-chart/fill-gauge-chart.tsx