Histogram

Histogram renders each distinct numeric observation as a thin bar, with its height showing repeated values. Use it to inspect a distribution rather than compare named categories.

import { Histogram } from "density-base-ui";

const responseTimes = [
  12, 15, 17, 18, 19, 21, 21, 22, 24, 25, 26, 27, 28, 29, 31, 32, 34, 36, 42,
  48,
];

export default function HistogramExample() {
  return (
    <Histogram aria-label="Response-time distribution" data={responseTimes} />
  );
}

Props

Prop	Values	Default
`data`	`number[]`	None
`aria-label`	string	None
`spark`	`true`, `false`	`false`
`color`	`chart-1` through `chart-6`, `positive`, `negative`, `neutral`	`chart-1`
`emphasis`	`primary`, `secondary`, `outline`, `ghost`	`secondary`
`size`	`2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`	`sm`
`title`	string	None
`height`	number	Responsive default

data and aria-label are required. Each bar represents one numeric value and exposes its count through a tooltip. size controls the title and axis-label size, while emphasis controls their color.

Spark

Set spark for a compact 32px chart without axes, gridlines, or visible labels. Spark charts still expose their data through keyboard-accessible tooltips.

import { Histogram } from "density-base-ui";
import { ExampleStack } from "../ExampleLayout";

const buildDurations = [
  14, 16, 18, 19, 21, 22, 23, 24, 24, 25, 27, 29, 31, 33, 34, 36, 39, 43,
];

export default function HistogramSparkExample() {
  return (
    <ExampleStack style={{ width: "100%" }}>
      <Histogram
        aria-label="Build duration distribution"
        color="neutral"
        data={buildDurations}
        spark
        style={{ width: "160px" }}
      />
    </ExampleStack>
  );
}

Color

Chart 1

Chart 2

Chart 3

Chart 4

Chart 5

Chart 6

Positive

Negative

Neutral

import { Histogram } from "density-base-ui";

const data = [1, 2, 2, 3, 3, 3, 4, 4, 5];

export default function HistogramColorExample() {
  return (
    <div style={styles.grid}>
      <Histogram
        aria-label="Chart 1"
        color="chart-1"
        data={data}
        height={100}
        title="Chart 1"
      />
      <Histogram
        aria-label="Chart 2"
        color="chart-2"
        data={data}
        height={100}
        title="Chart 2"
      />
      <Histogram
        aria-label="Chart 3"
        color="chart-3"
        data={data}
        height={100}
        title="Chart 3"
      />
      <Histogram
        aria-label="Chart 4"
        color="chart-4"
        data={data}
        height={100}
        title="Chart 4"
      />
      <Histogram
        aria-label="Chart 5"
        color="chart-5"
        data={data}
        height={100}
        title="Chart 5"
      />
      <Histogram
        aria-label="Chart 6"
        color="chart-6"
        data={data}
        height={100}
        title="Chart 6"
      />
      <Histogram
        aria-label="Positive"
        color="positive"
        data={data}
        height={100}
        title="Positive"
      />
      <Histogram
        aria-label="Negative"
        color="negative"
        data={data}
        height={100}
        title="Negative"
      />
      <Histogram
        aria-label="Neutral"
        color="neutral"
        data={data}
        height={100}
        title="Neutral"
      />
    </div>
  );
}
const styles = {
  grid: {
    display: "grid",
    gap: "1rem",
    gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
    width: "100%",
  },
} as const;

Emphasis

Primary

Secondary

Outline

Ghost

import { Histogram } from "density-base-ui";
const data = [1, 2, 2, 3, 3, 4, 5];
export default function HistogramEmphasisExample() {
  return (
    <div style={styles.grid}>
      <Histogram
        aria-label="Primary"
        data={data}
        emphasis="primary"
        height={120}
        title="Primary"
      />
      <Histogram
        aria-label="Secondary"
        data={data}
        emphasis="secondary"
        height={120}
        title="Secondary"
      />
      <Histogram
        aria-label="Outline"
        data={data}
        emphasis="outline"
        height={120}
        title="Outline"
      />
      <Histogram
        aria-label="Ghost"
        data={data}
        emphasis="ghost"
        height={120}
        title="Ghost"
      />
    </div>
  );
}
const styles = {
  grid: {
    display: "grid",
    gap: "1rem",
    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
    width: "100%",
  },
} as const;

Size

2xs

2xl

3xl

import { Histogram } from "density-base-ui";
const data = [1, 2, 2, 3, 3, 4, 5];
export default function HistogramSizeExample() {
  return (
    <div style={styles.grid}>
      <Histogram
        aria-label="2xs"
        data={data}
        height={100}
        size="2xs"
        title="2xs"
      />
      <Histogram
        aria-label="xs"
        data={data}
        height={100}
        size="xs"
        title="xs"
      />
      <Histogram
        aria-label="sm"
        data={data}
        height={100}
        size="sm"
        title="sm"
      />
      <Histogram
        aria-label="md"
        data={data}
        height={100}
        size="md"
        title="md"
      />
      <Histogram
        aria-label="lg"
        data={data}
        height={100}
        size="lg"
        title="lg"
      />
      <Histogram
        aria-label="xl"
        data={data}
        height={100}
        size="xl"
        title="xl"
      />
      <Histogram
        aria-label="2xl"
        data={data}
        height={100}
        size="2xl"
        title="2xl"
      />
      <Histogram
        aria-label="3xl"
        data={data}
        height={100}
        size="3xl"
        title="3xl"
      />
    </div>
  );
}
const styles = {
  grid: {
    display: "grid",
    gap: "1rem",
    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
    width: "100%",
  },
} as const;

Title

Response times

import { Histogram } from "density-base-ui";
export default function HistogramTitleExample() {
  return (
    <Histogram
      aria-label="Response-time distribution"
      data={[1, 2, 2, 3, 4]}
      title="Response times"
    />
  );
}

Height

120 pixels

240 pixels

import { Histogram } from "density-base-ui";
export default function HistogramHeightExample() {
  return (
    <div style={styles.grid}>
      <Histogram
        aria-label="120 pixel histogram"
        data={[1, 2, 2, 3, 4]}
        height={120}
        title="120 pixels"
      />
      <Histogram
        aria-label="240 pixel histogram"
        data={[1, 2, 2, 3, 4]}
        height={240}
        title="240 pixels"
      />
    </div>
  );
}
const styles = {
  grid: {
    display: "grid",
    gap: "1rem",
    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
    width: "100%",
  },
} as const;