LollipopChart

A stick and a dot per category: the quiet cousin of the bar chart, good for many categories or when the exact end value matters more than the area. Negative values hang from the zero line.

Import

import { LollipopChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/lollipop-chart.

Usage

<LollipopChart
  title="Servicios más vendidos en octubre"
  seriesName="Vendidos"
  items={services}
  orientation="horizontal"
  sort="none"
  valueFormat="integer"
  dotSize={7}
  dataLabels
  grid
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
items *	readonly LollipopItem[]
title *	string		Accessible name of the chart.
description	string
seriesName	string	"Value"	Name of the measure (tooltip and data table).
color	string		Color of the sticks and dots (default: the brand slot of the palette).
orientation	"horizontal" | "vertical"	"horizontal"
sort	"desc" | "none" | "asc"	"none"	Largest first, smallest first, or in data order (default).
valueFormat	ValueFormat
height	number | "fill"		Height in pixels, "fill" for the parent height. Rows size themselves in horizontal charts when omitted.
aspectRatio	number
rowHeight	number	34	Height of every row in pixels (default 34), horizontal charts without height.
dotSize	number	7	Radius of the dots in pixels (default 7).
dataLabels	boolean	true	Values printed beside the dots (default true).
yAxis	ValueAxisOptions
grid	boolean	true
tooltip	boolean	true
loading	boolean
animate	boolean	true
labels	Partial<ChartLabels>
className	string

* marks a required prop.

Storybook stories

• Default
• Vertical
• Sorted
• Negative Values
• Loading
• Empty
• Fill Parent
• Narrow

Source

packages/ui/src/charts/lollipop-chart/lollipop-chart.tsx