/

Lollipop Chart

A cleaner alternative to bar charts. Thin stems with dot markers reduce visual clutter while maintaining readability.

Usage

example.tsx
import { LollipopChart } from "@chartts/react"

<LollipopChart
  data={scores}
  x="student"
  y="score"
  horizontal
/>

Props

PropTypeDescription
dataT[]Array of data objects
xkeyof TKey for categories
ykeyof TKey for values
dotSizenumberDot radius in px. Default: 6
horizontalbooleanHorizontal layout. Default: false

Features

  • Vertical and horizontal layouts
  • Configurable dot size
  • Sorted display
  • Value labels
  • Grouped variant
  • Animated dot entry

Other Charts