# AreaChart

> Volume over time with a soft gradient fill.

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

Volume over time with a soft gradient fill. `stack="normal"` piles series
into a total; `stack="percent"` shows each one's share of 100%.

## Import

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

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

## Usage

```tsx
<AreaChart
  title="Servicios vendidos por semana"
  categories={weeks}
  valueFormat="integer"
  height={300}
  curve="smooth"
  stack="none"
  gradient
  markers={false}
  dataLabels={false}
  brush={false}
  loading={false}
  animate
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `series` * | `readonly ChartSeries[]` |  |  |
| `legend` | `boolean \| "top" \| "bottom"` |  | Legend placement, or false to hide it. Defaults to "top" with two or more series. |
| `title` * | `string` |  | Accessible name of the chart (`aria-label` of the drawing). |
| `animate` | `boolean` |  | Entry animation (default true; always off with prefers-reduced-motion). |
| `className` | `string` |  |  |
| `grid` | `boolean` |  | Background gridlines (default true). |
| `tooltip` | `boolean` |  | Shared tooltip (default true). |
| `gradient` | `boolean` |  | Gradient fill under areas (default true). |
| `categories` * | `readonly XValue[]` |  | One entry per data point: strings, numbers or dates. |
| `description` | `string` |  | Extra sentence for the hidden data table caption. |
| `height` | `number \| "fill"` |  | Height of the plot in pixels, 300 by default. |
| `aspectRatio` | `number` |  | Width / height ratio; sizes the plot from the container width (wins over a pixel `height`). |
| `stack` | `"normal" \| "none" \| "percent"` |  | Stacks every area and column series. |
| `curve` | `"linear" \| "smooth" \| "step" \| "step-before" \| "step-after"` | `"smooth"` |  |
| `markers` | `boolean` |  | Dots on every line point. Hovered points are always marked. |
| `dataLabels` | `boolean` |  | Values printed on the marks. |
| `lineGradient` | `boolean` |  | Strokes lines with a gradient from each series color to the next palette color. |
| `transition` | `boolean` |  | Eases lines and areas between data updates (live data); off by default. |
| `maxPoints` | `number \| false` |  | Series with more points than this are reduced with LTTB, 2000 by default; `false` draws every point. |
| `syncId` | `string` |  | Charts with the same id share hover (crosshair and tooltip) and the zoom window. |
| `onPointClick` | `((point: CartesianPointEvent) => void)` |  | Called with the category (and nearest series) under the pointer when the plot is clicked or Enter is pressed. |
| `valueFormat` | `ValueFormat` |  | Format of values in tooltips, labels and the data table. |
| `xFormat` | `((value: XValue) => string)` |  | Label of a category on the axis and in the tooltip (dates get Spanish defaults). |
| `xScale` | `"time" \| "auto" \| "band"` |  | "time" spaces dates by real elapsed time; "auto" picks it when every category is a Date and no series is a column. |
| `yAxis` | `ValueAxisOptions` |  |  |
| `axes` | `readonly CartesianAxisSpec[]` |  | Any number of value axes. `yAxis` and `rightAxis` are shorthand for the ids "left" and "right"; more entries stack outward on their `side` (right by default) and series pick one with `axis`. |
| `annotations` | `readonly ChartAnnotation[]` |  |  |
| `categoryLabelRotation` | `number` |  | Tilts the category labels (degrees, e.g. -45) so long names fit; vertical charts only. |
| `categoryGroups` | `readonly CategoryGroup[]` |  | Second tier of labels under the category axis (vertical charts); counts must add up to the categories. |
| `onCategoryClick` | `((index: number) => void)` |  | Click (or Enter on the focused plot) on a category; receives its index in `categories`. |
| `brush` | `boolean` |  | Drag-to-zoom on the plot plus an overview brush with a reset button. |
| `overlay` | `CartesianOverlay` |  | Extra layers over the plot, e.g. the ruler and ink tools of `useChartInk`. Vertical charts only. |
| `rangeSelect` | `{ value: readonly [number, number] \| null; onChange: (range: readonly [number, number] \| null) => void; }` |  |  |
| `loading` | `boolean` |  |  |
| `initialHidden` | `readonly string[]` |  | Series hidden at first; the legend can show them. |
| `labels` | `Partial<ChartLabels>` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-areachart--default)
- [Multiple Series](/storybook/?path=/story/charts-areachart--multiple-series)
- [Stacked](/storybook/?path=/story/charts-areachart--stacked)
- [Stacked 100%](/storybook/?path=/story/charts-areachart--stacked-percent)
- [Without Gradient](/storybook/?path=/story/charts-areachart--without-gradient)
- [Brush and zoom (120 days)](/storybook/?path=/story/charts-areachart--brush-zoom)
- [Step](/storybook/?path=/story/charts-areachart--step)
- [Negative Values](/storybook/?path=/story/charts-areachart--negative-values)
- [With Gaps](/storybook/?path=/story/charts-areachart--with-gaps)
- [Narrow](/storybook/?path=/story/charts-areachart--narrow)
- [Loading](/storybook/?path=/story/charts-areachart--loading)

## Source

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