CrossfilterBarChart

Live preview

Loading example…

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

import { CrossfilterBarChart } 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`		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

Source

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