# RangeAreaChart

> Min–max band over time (or categories) with an optional line for the average.

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

Min–max band over time (or categories) with an optional line for the
average. Several bands overlay each other; the legend toggles them.
Ideal for ranges such as waiting time per day or price floor and ceiling.

## Import

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

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

## Usage

```tsx
<RangeAreaChart
  title="Tiempo de espera mínimo y máximo por día"
  categories={days}
  bands={[waitTime]}
  height={300}
  curve="smooth"
  showMean
  grid
  tooltip
  loading={false}
  animate
  minLabel="Mín"
  maxLabel="Máx"
  meanLabel="Prom."
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `categories` * | `readonly XValue[]` |  |  |
| `bands` * | `readonly RangeBand[]` |  |  |
| `title` * | `string` |  | Accessible name of the chart. |
| `description` | `string` |  |  |
| `height` | `number \| "fill"` | `300` | Height of the plot in pixels. |
| `aspectRatio` | `number` |  | Width / height ratio; sizes the drawing from the container width when `height` is not "fill". |
| `curve` | `"linear" \| "smooth" \| "step" \| "step-before" \| "step-after"` | `"smooth"` |  |
| `showMean` | `boolean` | `true` | Draw the central line of bands that provide `mean` (default true). |
| `valueFormat` | `ValueFormat` |  |  |
| `xFormat` | `((value: XValue) => string)` |  |  |
| `xScale` | `"time" \| "auto" \| "point"` | `"auto"` | "auto" uses a real time axis when every category is a Date. |
| `yAxis` | `ValueAxisOptions` |  |  |
| `grid` | `boolean` | `true` |  |
| `legend` | `boolean \| "top" \| "bottom"` |  |  |
| `tooltip` | `boolean` | `true` |  |
| `loading` | `boolean` |  |  |
| `animate` | `boolean` | `true` |  |
| `initialHidden` | `readonly string[]` |  |  |
| `minLabel` | `string` | `"Min"` | Words used in the tooltip and the data table. |
| `maxLabel` | `string` | `"Max"` |  |
| `meanLabel` | `string` | `"Mean"` |  |
| `labels` | `Partial<ChartLabels>` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-rangeareachart--default)
- [Multiple Bands](/storybook/?path=/story/charts-rangeareachart--multiple-bands)
- [Without Mean](/storybook/?path=/story/charts-rangeareachart--without-mean)
- [Fixed Axis](/storybook/?path=/story/charts-rangeareachart--fixed-axis)
- [By Category](/storybook/?path=/story/charts-rangeareachart--by-category)
- [Loading](/storybook/?path=/story/charts-rangeareachart--loading)
- [Empty](/storybook/?path=/story/charts-rangeareachart--empty)
- [Narrow](/storybook/?path=/story/charts-rangeareachart--narrow)

## Source

`packages/ui/src/charts/range-area-chart/range-area-chart.tsx`