Lollipop Bars

Horizontal pill bars whose ends rise on a dotted stem to a dot and the value, with a legend naming each row.

TypeScript Source with Startup & Business plans Light & dark

Tickets by channel

Email
Chat
Phone
Social

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { Headset } from 'lucide-react';
2import { LollipopBarsChart } from '@/components/component-kit/items/chart-lollipop-bars';
3
4export function Example() {
5  return (
6    <LollipopBarsChart
7      icon={Headset}
8      title="Tickets by channel"
9      items={[
10        { id: 'email', label: 'Email', value: 1420 },
11        { id: 'chat', label: 'Chat', value: 980 },
12        { id: 'phone', label: 'Phone', value: 1660 },
13      ]}
14    />
15  );
16}

Props

Lollipop Bars properties
Prop	Type	Default	Description
`items`	`LollipopItem[]`	`—`	Rows with id, label, value and optional color.
`rowHeight`	`number`	`64`	Vertical space per row in pixels.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { Headset } from 'lucide-react';
2import { LollipopBarsChart } from '@/components/component-kit/items/chart-lollipop-bars';
3
4export function Example() {
5  return (
6    <LollipopBarsChart
7      icon={Headset}
8      title="Tickets by channel"
9      items={[
10        { id: 'email', label: 'Email', value: 1420 },
11        { id: 'chat', label: 'Chat', value: 980 },
12        { id: 'phone', label: 'Phone', value: 1660 },
13      ]}
14    />
15  );
16}

Prop

Type

Default

Description

items

LollipopItem[]

—

Rows with id, label, value and optional color.

rowHeight

number

64

Vertical space per row in pixels.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { Headset } from 'lucide-react';
2import { LollipopBarsChart } from '@/components/component-kit/items/chart-lollipop-bars';
3
4export function Example() {
5  return (
6    <LollipopBarsChart
7      icon={Headset}
8      title="Tickets by channel"
9      items={[
10        { id: 'email', label: 'Email', value: 1420 },
11        { id: 'chat', label: 'Chat', value: 980 },
12        { id: 'phone', label: 'Phone', value: 1660 },
13      ]}
14    />
15  );
16}

Prop

Type

Default

Description

items

LollipopItem[]

—

Rows with id, label, value and optional color.

rowHeight

number

64

Vertical space per row in pixels.

Lollipop Bars

Horizontal pill bars whose ends rise on a dotted stem to a dot and the value, with a legend naming each row.

TypeScript Source with Startup & Business plans Light & dark

Tickets by channel

Email
Chat
Phone
Social

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { Headset } from 'lucide-react';
2import { LollipopBarsChart } from '@/components/component-kit/items/chart-lollipop-bars';
3
4export function Example() {
5  return (
6    <LollipopBarsChart
7      icon={Headset}
8      title="Tickets by channel"
9      items={[
10        { id: 'email', label: 'Email', value: 1420 },
11        { id: 'chat', label: 'Chat', value: 980 },
12        { id: 'phone', label: 'Phone', value: 1660 },
13      ]}
14    />
15  );
16}

Props

Lollipop Bars properties
Prop	Type	Default	Description
`items`	`LollipopItem[]`	`—`	Rows with id, label, value and optional color.
`rowHeight`	`number`	`64`	Vertical space per row in pixels.