# CrossfilterBarChart

> Bars per category of one dimension.

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

Bars per category of one dimension. Click a bar to filter by it (click again to undo, several
bars add up). The light bars are the totals, the accent ones what the OTHER charts leave in;
categories outside this chart's own filter are dimmed.

## Import

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

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

## Usage

```tsx
export const VentasCruzadas: Story = {
  args: storyArgs,
  render: () => <SalesCrossfilter columns="wide" />,
};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `string` |  |  |
| `dimension` * | `string` |  | Dimension id (a key of the provider's `dimensions`). |
| `keys` | `readonly DimensionValue[]` |  | Categories in display order; otherwise the order of first appearance. |
| `keyLabel` | `((key: DimensionValue) => string)` | `String` | Text of a category on the axis. |
| `measure` | `((record: never) => number)` |  | Add this instead of counting records, e.g. `(sale) => sale.total` for revenue. |
| `orientation` | `"horizontal" \| "vertical"` | `"vertical"` |  |
| `labels` | `Partial<CrossfilterLabels>` |  |  |
| `className` | `string` |  |  |
| `legend` | `boolean \| "top" \| "bottom"` |  | Legend placement, or false to hide it. Defaults to "top" with two or more series. |
| `animate` | `boolean` |  | Entry animation (default true; always off with prefers-reduced-motion). |
| `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`). |
| `valueFormat` | `ValueFormat` |  | Format of values in tooltips, labels and the data table. |
| `yAxis` | `ValueAxisOptions` |  |  |

`*` marks a required prop.

## Storybook stories

- [Ventas Cruzadas](/storybook/?path=/story/charts-crossfilter--ventas-cruzadas)
- [Filtro Inicial](/storybook/?path=/story/charts-crossfilter--filtro-inicial)
- [Narrow](/storybook/?path=/story/charts-crossfilter--narrow)
- [Brutal Preset](/storybook/?path=/story/charts-crossfilter--brutal-preset)
- [Pincel Rectangular](/storybook/?path=/story/charts-crossfilter--pincel-rectangular)
- [Pincel Inicial](/storybook/?path=/story/charts-crossfilter--pincel-inicial)
- [Pincel Narrow](/storybook/?path=/story/charts-crossfilter--pincel-narrow)
- [Pincel Tactil](/storybook/?path=/story/charts-crossfilter--pincel-tactil)

## Source

`packages/ui/src/charts/crossfilter/crossfilter.tsx`