ChartGrid

Live preview

Loading example…

Small multiples (trellis): the same chart repeated per category over shared scales, so panels compare at a glance. Columns follow the width of the container, never the viewport.

Import

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

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

Usage

<ChartGrid
  title="Ventas por barbero"
  panels={linePanels}
  minPanelWidth={220}
  maxColumns={3}
  gap={16}
  sharedValueDomain
  sharedXDomain={false}
  includeZero={false}
  syncHover={false}
  bordered={false}
  emptyLabel="Sin barberos para mostrar"
>
  {none}
</ChartGrid>

Props

Prop	Type	Default	Description
`title` *	`string`		Accessible name of the whole grid.
`panels` *	`readonly ChartGridPanel[]`
`children` *	`(panel: ChartGridPanel, context: ChartGridContext) => ReactNode`		Renders the chart of one panel. Fill the panel: pass `ctx.height` and the shared domain on.
`minPanelWidth`	`number`	`220`	Narrowest a panel may get before the grid drops a column (container-based).
`maxColumns`	`number`	`6`
`gap`	`number`	`16`
`panelHeight`	`number`		Height of every chart in pixels. Default: derived from the panel width (about 1.4:1), at least 180.
`aspectRatio`	`number`		Width / height ratio for the charts; wins over `panelHeight`.
`sharedValueDomain`	`boolean`	`true`	One value domain for every panel (default true).
`sharedXDomain`	`boolean`	`false`	One x domain for every panel.
`includeZero`	`boolean`	`false`	Bars: keep zero inside the shared domain.
`legend`	`readonly LegendItem[]`		One legend for all panels (their own legends should be off).
`syncHover`	`boolean`	`false`	Hovering a panel shows the real crosshair and tooltip in every other panel. The charts must receive `context.syncId` as their `syncId`; panels only react when the hovered category exists in them.
`bordered`	`boolean`	`false`	Draw a border around every panel.
`emptyLabel`	`string`	`"No data"`	Text when there are no panels.
`className`	`string`

* marks a required prop.

Storybook stories

Source

packages/ui/src/charts/chart-grid/chart-grid.tsx