CrossfilterHistogram

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

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

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

Usage

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
• Filtro Inicial
• Narrow
• Brutal Preset
• Pincel Rectangular
• Pincel Inicial
• Pincel Narrow
• Pincel Tactil

Source

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