# CrossfilterHistogram

> Distribution of a numeric dimension.

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

Distribution of a numeric dimension. Drag across the bars to filter by that interval, or click a
bin; the band stays drawn until you click it again or press Clear.

## Import

```ts
import { CrossfilterHistogram } 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` |  | Numeric dimension to bin. |
| `edges` | `readonly number[]` |  | Bin edges; or give `domain` and `bins` to split evenly. |
| `domain` | `readonly [number, number]` | `[0, 100]` |  |
| `bins` | `number` | `10` |  |
| `edgeFormat` | `ValueFormat` |  | Format of the bin edges in the axis and tooltip. |
| `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`