2

Dot Plot Chart

PreviousNext

A Wilkinson dot plot showing frequency distribution with stacked dots.

304050607080Score Distribution
"use client"

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

// Static sample data resembling a distribution
const data = [
  34, 38, 41, 42, 43, 44, 44, 45, 45, 46, 46, 46, 47, 47, 47, 47, 48, 48, 48,
  48, 49, 49, 49, 49, 49, 50, 50, 50, 50, 50, 51, 51, 51, 51, 51, 51, 52, 52,
  52, 52, 53, 53, 53, 53, 53, 54, 54, 54, 54, 55, 55, 55, 55, 55, 56, 56, 56,
  56, 57, 57, 57, 57, 58, 58, 58, 59, 59, 59, 60, 60, 61, 61, 62, 62, 63, 64,
  65, 66, 68, 70, 71, 72, 73, 75, 77, 79,
]

export function DotPlotChartDemo() {
  return (
    <div className="mx-auto w-full max-w-2xl">
      <DotPlotChart
        data={data}
        dotSize={8}
        binCount={25}
        xAxisLabel="Score Distribution"
        color="#2563eb"
      />
    </div>
  )
}

About

The Dot Plot Chart (Wilkinson dot plot) displays the distribution of numeric data by stacking dots vertically. Each dot represents one observation, making it easy to see both the shape of the distribution and individual data points.

Installation

pnpm dlx shadcn@latest add https://ui.simplifying.ai/r/dot-plot-chart.json

Usage

import { DotPlotChart } from "@/components/ui/charts"
 
// Simple array of numbers
const data = [45, 52, 48, 55, 60, 52, 48, 55, 63, 58, 52, 49]
 
export function Example() {
  return <DotPlotChart data={data} xAxisLabel="Values" />
}

With Custom Colors

import { DotPlotChart } from "@/components/ui/charts"
 
// Array of objects with optional colors
const data = [
  { value: 45, color: "#ef4444" },
  { value: 52, color: "#3b82f6" },
  { value: 55, color: "#22c55e" },
]
 
export function Example() {
  return <DotPlotChart data={data} />
}

API Reference

PropTypeDefaultDescription
datanumber[] | DotPlotDataPoint[]requiredArray of values or data points
dotSizenumber8Diameter of dots in pixels
dotSpacingnumber2Space between stacked dots
binCountnumber20Number of bins for grouping values
showGridbooleantrueShow vertical grid lines
showXAxisbooleantrueShow x-axis labels
xAxisLabelstring-Label for the x-axis
colorstring"#2563eb"Default dot color
valueFormatterfunctiontoLocaleStringFormat axis values

Notes

  • Dot plots are ideal for showing distributions with up to ~200 data points
  • Each dot represents a single observation, preserving individual data visibility
  • The binCount prop controls how values are grouped; increase for more precision
  • Dots are stacked from bottom to top at each bin position
  • Hover over dots to see the bin range and count
  • Unlike histograms, dot plots show discrete counts making it easier to see exact frequencies