Skip to content
@jcsoftdev/ui

LineDrilldown

Open .md
Live preview

Loading example…

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

Section titled “Import”
import { LineDrilldown } from "@jcsoftdev/ui/charts";

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

Usage

Section titled “Usage”
<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

Section titled “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

Section titled “Storybook stories”

Source

Section titled “Source”

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