@graphique/geom-histogram

For visualizing histograms in Graphique.

With larger data sets, pre-compute bins and pass the binned data directly to @graphique/geom-col.

Install

npm install @graphique/geom-histogram # @graphique/graphique is a peer dependency

pnpm add @graphique/geom-histogram # @graphique/graphique is a peer dependency

yarn add @graphique/geom-histogram # @graphique/graphique is a peer dependency

bun add @graphique/geom-histogram # @graphique/graphique is a peer dependency

name	description
`bins?`	approximate number of equal-width bins that the x domain is divided into (default: `30`) `number`
`rangeFormat?`	function for customizing bin range format in tooltips `(x0: number, x1: number) => string`
`isRelative?`	should y values for bins be displayed as relative frequencies instead of counts (default: `false`) `boolean`
`attr?`	attributes passed to the underlying SVG elements `React.SVGAttributes`
`showTooltip?`	should this Geom have a tooltip associated with it (default: `true`) `boolean`
`brushAction?`	determines what happens when brushing (clicking and dragging) over the drawing area `BrushAction.ZOOM`
`focusedStyle?`	styles applied to focused elements `React.CSSProperties`
`unfocusedStyle?`	styles applied to unfocused elements `React.CSSProperties`
`onDatumFocus?`	callback called for mousemove events on the drawing area when focusing data `(data: HistogramBin[], index: number[]) => void`
`onDatumSelection?`	callback called for click events on the drawing area when selecting focused data `(data: HistogramBin[], index: number[]) => void`
`onExit?`	callback called for mouseleave events on the drawing area `() => void`
`isAnimated?`	should elements enter/update/exit with animated transitions (default: `true`) `boolean`

name	description
`title?`	title of legend `React.ReactNode`
`orientation?`	determines vertical/horizontal orientation of categorical legend members (default: `LegendOrientation.V`) `LegendOrientation`
`format?`	function for formatting legend member labels (categorical) or tick labels (continuous) `(v: string, i: number) => string`
`width?`	width of continuous legend in pixels (default: `320`) `number`
`numTicks?`	approximate number of ticks for continuous legend (default: `width / 64`) `number`
`onSelection?`	callback called for click events on legend members `(v: string) => void`
`style?`	additional styles passed to legend container `React.CSSProperties`