3

Lollipop Chart

PreviousNext

Diverging chart with stems and circular endpoints for comparing positive and negative values.

TYCF28HCVLEUFX9P91M24MRXH4DFDNM28VALM2CHSBM4SM4EDCHAMJCZ8CFL-2-10123mpg_z
"use client"

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

const data = [
  { category: "TYC", value: 2.3, group: "4 cyl" },
  { category: "F28", value: 2.0, group: "4 cyl" },
  { category: "HCV", value: 1.7, group: "4 cyl" },
  { category: "LEU", value: 1.7, group: "4 cyl" },
  { category: "FX9", value: 1.2, group: "4 cyl" },
  { category: "P91", value: 1.0, group: "4 cyl" },
  { category: "M24", value: 0.7, group: "4 cyl" },
  { category: "MRX", value: 0.2, group: "6 cyl" },
  { category: "H4D", value: 0.2, group: "6 cyl" },
  { category: "FDN", value: 0.0, group: "6 cyl" },
  { category: "M28", value: -0.1, group: "6 cyl" },
  { category: "VAL", value: -0.2, group: "6 cyl" },
  { category: "M2C", value: -0.4, group: "6 cyl" },
  { category: "HSB", value: -0.2, group: "8 cyl" },
  { category: "M4S", value: -0.4, group: "8 cyl" },
  { category: "M4E", value: -0.6, group: "8 cyl" },
  { category: "DCH", value: -0.8, group: "8 cyl" },
  { category: "AMJ", value: -0.8, group: "8 cyl" },
  { category: "CZ8", value: -1.1, group: "8 cyl" },
  { category: "CFL", value: -1.6, group: "8 cyl" },
]

export function LollipopChartDemo() {
  return <LollipopChart data={data} dotSize={10} yAxisLabel="mpg_z" />
}

About

The Lollipop Chart is a variation of a bar chart where bars are replaced with lines (stems) and circles (dots). It's especially effective for diverging data where values can be positive or negative, with stems extending from a zero baseline.

Installation

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

Usage

import { LollipopChart } from "@/components/ui/charts"
 
const data = [
  { category: "Product A", value: 1.5, color: "#00BFC4", group: "High" },
  { category: "Product B", value: 0.8, color: "#00BFC4", group: "High" },
  { category: "Product C", value: -0.3, color: "#F8766D", group: "Low" },
  { category: "Product D", value: -1.2, color: "#F8766D", group: "Low" },
]
 
export function Example() {
  return (
    <LollipopChart
      data={data}
      orientation="vertical"
      showLegend
      yAxisLabel="Score"
    />
  )
}

API Reference

PropTypeDefaultDescription
dataLollipopDataPoint[]requiredArray of data points
orientation"horizontal" | "vertical""vertical"Chart orientation
dotSizenumber12Radius of dots in pixels
showGridbooleantrueShow grid lines
showLegendbooleantrueShow legend for grouped data
colorstring"#2563eb"Default dot color
stemColorstring"#e5e7eb"Stem color
yAxisLabelstring-Label for the y-axis

Data Format

interface LollipopDataPoint {
  category: string // Label for the data point
  value: number // Can be positive or negative
  color?: string // Optional custom color
  group?: string // Optional group for legend
}

Notes

  • Lollipop charts excel at showing diverging data with positive and negative values
  • The zero baseline makes it easy to identify above/below average values
  • Use the group property to create a color legend for categorical groupings
  • Chart width automatically scales based on the number of data points
  • Horizontally scrollable when data exceeds viewport width
  • Works well with normalized/z-score data for comparing across different scales