# GaugeChart

> Gauge (semi or three-quarter arc).

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

Gauge (semi or three-quarter arc). Colored range bands, a filled progress
arc or a needle, min/max labels, optional ticks and an animated value.
Bands are explorable with the keyboard and show a tooltip.

## Import

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

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

## Usage

```tsx
<GaugeChart
  title="Ocupación de sillas"
  label="Ocupación de sillas"
  value={76}
  min={0}
  max={100}
  variant="semi"
  mode="progress"
  ranges={occupancyBands}
  thickness={18}
  roundedCaps
  ticks={0}
  minMaxLabels
  valueFormat={percentFormat}
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `string` |  |  |
| `description` | `string` |  |  |
| `value` * | `number` |  |  |
| `min` | `number` | `0` |  |
| `max` | `number` | `100` |  |
| `variant` | `"semi" \| "three-quarter"` | `"semi"` | `semi` is a half circle, `three-quarter` a 270 degree arc. |
| `mode` | `"progress" \| "needle"` | `"progress"` | Filled arc (`progress`) or a pointer over the bands (`needle`). |
| `ranges` | `readonly GaugeRange[]` |  | Colored bands. With `progress` they sit behind the arc and the arc takes the color of the band it is in. |
| `height` | `number \| "fill"` |  |  |
| `aspectRatio` | `number` |  | Width / height ratio; sizes the drawing from the container width when `height` is not "fill". |
| `thickness` | `number` | `18` | Arc thickness in pixels. |
| `roundedCaps` | `boolean` | `true` |  |
| `ticks` | `number` | `0` | Value labels along the inside of the arc (count of divisions, 0 = none). |
| `tickMarks` | `boolean` | `false` | Draws a tick line at every division (and at each minor step), like a dial. |
| `minorTicks` | `number` | `4` | Minor tick lines between two divisions; only with `tickMarks`. |
| `centerContent` | `((context: GaugeCenterContext) => ReactNode)` |  | Replaces the value and caption in the middle with your own content (HTML, sized to the arc). |
| `minMaxLabels` | `boolean` | `true` | Min and max under the ends of the arc. |
| `label` | `string` |  | Caption under the value, e.g. "Ocupación de sillas". |
| `valueFormat` | `ValueFormat` |  |  |
| `tooltip` | `boolean` | `true` |  |
| `loading` | `boolean` | `false` |  |
| `animate` | `boolean` | `true` |  |
| `labels` | `Partial<ChartLabels>` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-gaugechart--default)
- [Needle](/storybook/?path=/story/charts-gaugechart--needle)
- [Three Quarter](/storybook/?path=/story/charts-gaugechart--three-quarter)
- [Three Quarter Needle](/storybook/?path=/story/charts-gaugechart--three-quarter-needle)
- [No Bands](/storybook/?path=/story/charts-gaugechart--no-bands)
- [Ticks](/storybook/?path=/story/charts-gaugechart--ticks)
- [Ticks Three Quarter](/storybook/?path=/story/charts-gaugechart--ticks-three-quarter)
- [Custom Label](/storybook/?path=/story/charts-gaugechart--custom-label)
- [Live Needle](/storybook/?path=/story/charts-gaugechart--live-needle)
- [Loading](/storybook/?path=/story/charts-gaugechart--loading)
- [Empty](/storybook/?path=/story/charts-gaugechart--empty)
- [Narrow](/storybook/?path=/story/charts-gaugechart--narrow)
- [Fill Parent](/storybook/?path=/story/charts-gaugechart--fill-parent)

## Source

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