# LineDrilldown

> A line chart you can drill into: click (or press Enter on) a point that has children to zoom into it, and use the breadcrumb to climb back out.

Source: https://ui.jcsoftdev.com/docs/components/line-drilldown

A line chart you can drill into: click (or press Enter on) a point that has
children to zoom into it, and use the breadcrumb to climb back out.

## Import

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

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

## Usage

```tsx
<LineDrilldown
  title="Ventas por día"
  categories={twoWeeks.dates}
  series={[{ id: "ventas", name: "Ventas", data: twoWeeks.values }]}
  valueFormat="currency"
  height={300}
  curve="smooth"
  markers={false}
  dataLabels={false}
  grid
  tooltip
  brush={false}
  loading={false}
  animate
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `data` * | `HierarchyDatum` |  | Hierarchy to walk. The children of the focused node are the points of the line, in the order given; a node's value is its own or the sum of its children. |
| `seriesName` | `string` |  | Name of the line in legend and tooltip. |
| `breadcrumbLabel` | `string` | `"Drilldown path"` | Accessible name of the breadcrumb landmark. |
| `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` |  | Strokes each line with a gradient from its color towards the next palette color. |
| `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`). |
| `curve` | `"linear" \| "smooth" \| "step" \| "step-before" \| "step-after"` |  |  |
| `markers` | `boolean` |  | Dots on every line point. Hovered points are always marked. |
| `dataLabels` | `boolean` |  | Values printed on the marks. |
| `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. |
| `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-linechart--default)
- [Straight](/storybook/?path=/story/charts-linechart--straight)
- [Compared with last period (dashed)](/storybook/?path=/story/charts-linechart--compared-with-last-period)
- [Data Labels](/storybook/?path=/story/charts-linechart--data-labels)
- [Annotations (goal and holiday)](/storybook/?path=/story/charts-linechart--goal-and-holiday)
- [Brush and zoom (92 days)](/storybook/?path=/story/charts-linechart--brush-zoom)
- [With Gaps](/storybook/?path=/story/charts-linechart--with-gaps)
- [Step](/storybook/?path=/story/charts-linechart--step)
- [Annotated (lines, bands, markers, text)](/storybook/?path=/story/charts-linechart--annotated)
- [Gradient](/storybook/?path=/story/charts-linechart--gradient)
- [Synced Charts](/storybook/?path=/story/charts-linechart--synced-charts)
- [Live Append](/storybook/?path=/story/charts-linechart--live-append)
- [Downsampled (100k points)](/storybook/?path=/story/charts-linechart--downsampled-100-k)
- [Drilldown](/storybook/?path=/story/charts-linechart--drilldown)
- [Drilldown Narrow](/storybook/?path=/story/charts-linechart--drilldown-narrow)
- [Loading](/storybook/?path=/story/charts-linechart--loading)
- [Empty](/storybook/?path=/story/charts-linechart--empty)
- [Fill Parent](/storybook/?path=/story/charts-linechart--fill-parent)
- [Narrow](/storybook/?path=/story/charts-linechart--narrow)

## Source

`packages/ui/src/charts/line-chart/line-drilldown.tsx`