DrilldownBarChart

Live preview

Loading example…

Bars of one level of a hierarchy. Click (or Enter on) a bar that has children to drill into it; the breadcrumb above brings you back out. Bars that can be opened carry a › after their label.

Import

import { DrilldownBarChart } from "@jcsoftdev/ui/charts";

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

Usage

<DrilldownBarChart
  title="Citas por barbero esta semana"
  categories={barbers}
  series={[{ id: "citas", name: "Citas", data: appointmentsThisWeek }]}
  valueFormat="integer"
  orientation="vertical"
  stack="none"
  barRadius={6}
  height={300}
  dataLabels={false}
  grid
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
`data` *	`HierarchyDatum`		Tree to explore: the chart shows the children of the focused node.
`seriesName`	`string`	`"Value"`	Name of the single series (tooltip and data table).
`breadcrumbLabel`	`string`	`"Drill-down path"`	Accessible name of the breadcrumb navigation.
`sort`	`boolean`	`true`	Largest first (default) or in data order.
`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).
`orientation`	`"horizontal" \| "vertical"`		“horizontal” lays categories top to bottom (bar charts).
`barRadius`	`number`		Corner radius at the value end of bars, 6 by default.
`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.
`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).
`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.
`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

Source

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