Histogram

The distribution of one numeric column. x is binned and counted in the browser. Control the resolution with bins or binwidth.

Loading…

<Histogram data="db.iris" x="petal_length" bins={20} />

Split by group

A hue column colors the bars per category; stacked stacks those groups within each bin instead of overlaying them.

Loading…

<Histogram
  data="db.iris"
  x="petal_length"
  hue="species"
  bins={20}
  stacked
  legend="bottom"
/>

Props

Prop	Type	Notes
`data` / `query`	relation \| SQL	Source rows; a relation, or full SQL. Mutually exclusive.
`x`	column	The numeric column to bin.
`bins` / `binwidth`	`number`	Bin count, or a fixed bin width. Pick one.
`binrange`	`[number, number]`	Clamp binning to a range.
`stat`	`"count"` \| `"frequency"` \| `"density"` \| `"probability"`	What the bar height measures.
`hue`	column	Color bars by a category.
`stacked`	`bool`	Stack `hue` groups within each bin.
`xFormat` / `valueFormat`	d3-format spec	How the axis and bar values render.
`legend`	`"top"` \| `"bottom"` \| `"left"` \| `"right"` \| `"none"`	Legend placement.

Expressions in query and filters values support {{binding}} interpolation against the surrounding BindingProvider.

Installation

Histogram ships in @n6k.io/ui/components. Nothing to install. Register the namespace once in src/app/mdx-components.tsx and the tag resolves in both .mdx and page.py pages:

import * as n6k from "@n6k.io/ui/components";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...n6k, // Histogram, and every other n6k component
    ...components,
  } as unknown as MDXComponents;
}