3

Histogram Chart

PreviousNext

Distribution histograms with multiple variants for visualizing data frequency.

20406080Value0102030405060Frequency
"use client"

import { HistogramChart } from "@/components/ui/charts"

// Generate normal distribution data using Box-Muller transform
function generateNormalData(n: number, mean: number, stdDev: number): number[] {
  const data: number[] = []
  for (let i = 0; i < n; i += 2) {
    const u1 = Math.random()
    const u2 = Math.random()
    const z0 = Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2)
    const z1 = Math.sqrt(-2 * Math.log(u1)) * Math.sin(2 * Math.PI * u2)
    data.push(mean + z0 * stdDev)
    if (i + 1 < n) data.push(mean + z1 * stdDev)
  }
  return data
}

// Generate sample normal distribution
const normalData = generateNormalData(1000, 50, 15)

export function HistogramChartDemo() {
  return (
    <div className="w-full max-w-3xl">
      <HistogramChart
        data={normalData}
        bins={40}
        showBorder
        xAxisLabel="Value"
        yAxisLabel="Frequency"
      />
    </div>
  )
}

About

The Histogram Chart displays the distribution of numerical data by grouping values into bins. Supports multiple datasets and various visual styles.

Installation

pnpm dlx shadcn@latest add https://ui.simplifyingai.com/r/histogram-chart.json

Variants

Default

Classic histogram with solid bars and optional border stroke.

Overlay

Multiple datasets displayed with transparency, overlapping to show distribution comparison.

020406080100Value050100150FrequencyDataset 1Dataset 2
"use client"

import { HistogramChart } from "@/components/ui/charts"

// Generate normal distribution data
function generateNormalData(n: number, mean: number, stdDev: number): number[] {
  const data: number[] = []
  for (let i = 0; i < n; i += 2) {
    const u1 = Math.random()
    const u2 = Math.random()
    const z0 = Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2)
    const z1 = Math.sqrt(-2 * Math.log(u1)) * Math.sin(2 * Math.PI * u2)
    data.push(mean + z0 * stdDev)
    if (i + 1 < n) data.push(mean + z1 * stdDev)
  }
  return data
}

// Two overlapping distributions
const dataset1 = generateNormalData(800, 35, 12)
const dataset2 = generateNormalData(800, 65, 14)

export function HistogramChartOverlayDemo() {
  return (
    <div className="w-full max-w-3xl">
      <HistogramChart
        data={[
          { data: dataset1, label: "Dataset 1", color: "#3b82f6" },
          { data: dataset2, label: "Dataset 2", color: "#8b5cf6" },
        ]}
        variant="overlay"
        bins={35}
        xAxisLabel="Value"
        yAxisLabel="Frequency"
        showBorder
      />
    </div>
  )
}

Gradient

Each bar colored based on position using a color scale (viridis, plasma, warm, cool, rainbow).

20406080Value010203040506070Frequency
"use client"

import { HistogramChart } from "@/components/ui/charts"

// Generate normal distribution data
function generateNormalData(n: number, mean: number, stdDev: number): number[] {
  const data: number[] = []
  for (let i = 0; i < n; i += 2) {
    const u1 = Math.random()
    const u2 = Math.random()
    const z0 = Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2)
    const z1 = Math.sqrt(-2 * Math.log(u1)) * Math.sin(2 * Math.PI * u2)
    data.push(mean + z0 * stdDev)
    if (i + 1 < n) data.push(mean + z1 * stdDev)
  }
  return data
}

const normalData = generateNormalData(1000, 50, 15)

export function HistogramChartGradientDemo() {
  return (
    <div className="w-full max-w-3xl">
      <HistogramChart
        data={normalData}
        variant="gradient"
        colorScale="viridis"
        bins={40}
        showBorder={false}
        xAxisLabel="Value"
        yAxisLabel="Frequency"
      />
    </div>
  )
}

Stepped

Area/stepped histogram style with semi-transparent fill, ideal for comparing multiple distributions.

020406080100Value0102030405060FrequencyGroup AGroup BGroup C
"use client"

import { HistogramChart } from "@/components/ui/charts"

// Generate normal distribution data
function generateNormalData(n: number, mean: number, stdDev: number): number[] {
  const data: number[] = []
  for (let i = 0; i < n; i += 2) {
    const u1 = Math.random()
    const u2 = Math.random()
    const z0 = Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2)
    const z1 = Math.sqrt(-2 * Math.log(u1)) * Math.sin(2 * Math.PI * u2)
    data.push(mean + z0 * stdDev)
    if (i + 1 < n) data.push(mean + z1 * stdDev)
  }
  return data
}

// Three overlapping distributions
const dataset1 = generateNormalData(600, 30, 10)
const dataset2 = generateNormalData(600, 50, 12)
const dataset3 = generateNormalData(600, 70, 11)

export function HistogramChartSteppedDemo() {
  return (
    <div className="w-full max-w-3xl">
      <HistogramChart
        data={[
          { data: dataset1, label: "Group A", color: "#3b82f6" },
          { data: dataset2, label: "Group B", color: "#8b5cf6" },
          { data: dataset3, label: "Group C", color: "#06b6d4" },
        ]}
        variant="stepped"
        bins={40}
        fillOpacity={0.35}
        xAxisLabel="Value"
        yAxisLabel="Frequency"
      />
    </div>
  )
}

Usage

Single Dataset

import { HistogramChart } from "@/components/ui/charts"
 
const data = [12, 15, 18, 22, 25, 28, 30, 32, 35, 38, 40, 42, 45]
 
export function Example() {
  return <HistogramChart data={data} bins={20} color="#4285f4" showBorder />
}

Multiple Datasets

import { HistogramChart } from "@/components/ui/charts"
 
const datasets = [
  { data: dataset1, label: "Group A", color: "#00bcd4" },
  { data: dataset2, label: "Group B", color: "#9c27b0" },
]
 
export function OverlayExample() {
  return <HistogramChart data={datasets} variant="overlay" bins={30} />
}

Gradient Colors

import { HistogramChart } from "@/components/ui/charts"
 
export function GradientExample() {
  return (
    <HistogramChart
      data={data}
      variant="gradient"
      colorScale="viridis"
      bins={40}
    />
  )
}

API Reference

PropTypeDefaultDescription
datanumber[] or HistogramDataset[]requiredSingle or multiple datasets
variant"default" "overlay" "gradient" "stepped""default"Display style
binsnumber30Number of histogram bins
colorstring-Bar color (single dataset)
colorScale"viridis" "plasma" "warm" "cool" "rainbow""viridis"Color scale for gradient
showBorderbooleantrueShow bar border stroke
borderColorstring-Border color (defaults to fill)
cornerRadiusnumber0Bar corner radius
fillOpacitynumbervariesFill opacity (auto by variant)
normalizedbooleanfalseShow percentages
showDensitybooleanfalseShow density values
showLegendbooleantrueShow legend for multi-dataset
barPaddingnumber1Padding between bars

Data Types

HistogramDataset

interface HistogramDataset {
  data: number[]
  label?: string
  color?: string
}

Notes

  • The histogram chart automatically calculates bin ranges based on the data distribution
  • The default variant displays solid bars with optional border strokes
  • The overlay variant uses transparency to allow comparison of multiple distributions
  • The gradient variant applies color scales (viridis, plasma, warm, cool, rainbow) to bars based on position
  • The stepped variant creates an area/line style histogram with semi-transparent fill
  • Bin count can be customized to control the granularity of the distribution display
  • The normalized option displays percentages instead of raw frequencies
  • The showDensity option displays probability density values for statistical analysis
  • Multiple datasets are automatically handled with legends when provided as an array
  • Corner radius can be applied to bars for a softer, more modern appearance
  • Bar padding controls the spacing between adjacent bars in the histogram
  • Custom colors can be specified per dataset for multi-dataset comparisons