# ChartGrid

> Small multiples (trellis): the same chart repeated per category over shared scales, so panels compare at a glance.

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

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

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

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

## Usage

```tsx
<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

- [Trellis](/storybook/?path=/story/charts-chartgrid--trellis)
- [Trellis Sync Hover](/storybook/?path=/story/charts-chartgrid--trellis-sync-hover)
- [Trellis Bars](/storybook/?path=/story/charts-chartgrid--trellis-bars)
- [Narrow](/storybook/?path=/story/charts-chartgrid--narrow)
- [Empty](/storybook/?path=/story/charts-chartgrid--empty)

## Source

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