# FillGaugeChart

> Silhouettes filled to a level: stock left in a bottle, a battery of capacity, a droplet of water, a target reached.

Source: https://ui.jcsoftdev.com/docs/components/fill-gauge-chart

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

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

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

## Usage

```tsx
<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](/storybook/?path=/story/charts-fillgaugechart--default)
- [Droplet](/storybook/?path=/story/charts-fillgaugechart--droplet)
- [Battery (fills sideways)](/storybook/?path=/story/charts-fillgaugechart--battery)
- [Mixed shapes (person, target, shield)](/storybook/?path=/story/charts-fillgaugechart--mixed-shapes)
- [Raw value labels, flat level](/storybook/?path=/story/charts-fillgaugechart--raw-values)
- [Custom SVG shape](/storybook/?path=/story/charts-fillgaugechart--custom-shape)
- [Loading](/storybook/?path=/story/charts-fillgaugechart--loading)
- [Empty](/storybook/?path=/story/charts-fillgaugechart--empty)
- [Narrow](/storybook/?path=/story/charts-fillgaugechart--narrow)

## Source

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