Density

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";
import { asterLabsVolumeSamples } from "../charts/asterLabsVolumeSeries";

export default function HistogramExample() {
  return (
    <Histogram
      aria-label="Aster Labs intraday volume distribution"
      data={asterLabsVolumeSamples}
    />
  );
}

data and aria-label are required. Each bar represents one numeric value and exposes its count through a tooltip. size controls the title size; axis labels render one Density size step smaller. emphasis controls their color.

Animate

Set animate to reveal the bars upward from their baseline when the chart mounts. It defaults to false and respects reduced-motion preferences.

import { Button, Histogram, View } from "density-base-ui";
import { RefreshCw } from "lucide-react";
import { useState } from "react";
import { asterLabsVolumeSamples } from "../charts/asterLabsVolumeSeries";

export default function HistogramAnimateExample() {
  const [animationKey, setAnimationKey] = useState(0);

  return (
    <View>
      <Histogram
        key={animationKey}
        animate
        aria-label="Animated Aster Labs intraday volume distribution"
        data={asterLabsVolumeSamples}
      />
      <Button onClick={() => setAnimationKey((key) => key + 1)}>
        <RefreshCw aria-hidden="true" size={14} />
        Replay animation
      </Button>
    </View>
  );
}

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, View } from "density-base-ui";

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 (
    <View align="start" gap="md" padding={false}>
      <Histogram
        aria-label="Build duration distribution"
        color="neutral"
        data={buildDurations}
        spark
        style={{ width: "160px" }}
      />
    </View>
  );
}

Color

Chart 1
Chart 2
Chart 3
Chart 4
Chart 5
Chart 6
Positive
Negative
Neutral
import { Histogram, View } from "density-base-ui";

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

export default function HistogramColorExample() {
  return (
    <View
      gap="xl"
      layout="grid"
      padding={false}
      style={{
        gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
        width: "100%",
      }}
    >
      <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"
      />
    </View>
  );
}

Emphasis

Primary
Secondary
Outline
Ghost
import { Histogram, View } from "density-base-ui";
const data = [1, 2, 2, 3, 3, 4, 5];
export default function HistogramEmphasisExample() {
  return (
    <View
      gap="xl"
      layout="grid"
      padding={false}
      style={{
        gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
        width: "100%",
      }}
    >
      <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-primary"
        height={120}
        title="Ghost"
      />
    </View>
  );
}

Size

2xs
xs
sm
md
lg
xl
2xl
3xl
import { Histogram, View } from "density-base-ui";
const data = [1, 2, 2, 3, 3, 4, 5];
export default function HistogramSizeExample() {
  return (
    <View
      gap="xl"
      layout="grid"
      padding={false}
      style={{
        gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
        width: "100%",
      }}
    >
      <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"
      />
    </View>
  );
}

Title

Response times
Requests from the previous seven days
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"
      subtitle="Requests from the previous seven days"
    />
  );
}

Height

120 pixels
240 pixels
import { Histogram, View } from "density-base-ui";
export default function HistogramHeightExample() {
  return (
    <View
      gap="xl"
      layout="grid"
      padding={false}
      style={{
        gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
        width: "100%",
      }}
    >
      <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"
      />
    </View>
  );
}

Padding

Set padding to add outer spacing around the frame without changing the plotted bars’ geometry.

import { Histogram } from "density-base-ui";
import { asterLabsVolumeSamples } from "../charts/asterLabsVolumeSeries";

export default function HistogramPaddingExample() {
  return (
    <Histogram
      aria-label="Aster Labs trade volume with padding"
      data={asterLabsVolumeSamples}
      padding
    />
  );
}