Overlaid Bars

Potential behind, actual in front: two values per category in one hue on one scale, with value tags, compact axis ticks and tooltips.

TypeScript Source with Startup & Business plans Light & dark

Seats booked vs capacity

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 { Building2 } from 'lucide-react';
2import { OverlaidBarsChart } from '@/components/component-kit/items/chart-overlaid-bars';
3
4export function Example() {
5  return (
6    <OverlaidBarsChart
7      icon={Building2}
8      title="Seats booked vs capacity"
9      series={{ potential: 'Capacity', actual: 'Booked' }}
10      data={[
11        { label: 'Main Hall', potential: 2400, actual: 1850 },
12        { label: 'Studio', potential: 900, actual: 620 },
13        { label: 'Atrium', potential: 1600, actual: 1340 },
14      ]}
15    />
16  );
17}

Props

Overlaid Bars properties
Prop	Type	Default	Description
`data`	`OverlaidBarsDatum[]`	`—`	One row per category with potential and actual.
`series`	`{ potential, actual }`	`Capacity / Booked`	Labels for the two values.
`showTags`	`boolean`	`true`	Show the potential in a tag above each column.

Usage

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

example.tsx

1import { Building2 } from 'lucide-react';
2import { OverlaidBarsChart } from '@/components/component-kit/items/chart-overlaid-bars';
3
4export function Example() {
5  return (
6    <OverlaidBarsChart
7      icon={Building2}
8      title="Seats booked vs capacity"
9      series={{ potential: 'Capacity', actual: 'Booked' }}
10      data={[
11        { label: 'Main Hall', potential: 2400, actual: 1850 },
12        { label: 'Studio', potential: 900, actual: 620 },
13        { label: 'Atrium', potential: 1600, actual: 1340 },
14      ]}
15    />
16  );
17}

Prop

Type

Default

Description

data

OverlaidBarsDatum[]

—

One row per category with potential and actual.

series

{ potential, actual }

Capacity / Booked

Labels for the two values.

showTags

boolean

true

Show the potential in a tag above each column.

Usage

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

example.tsx

1import { Building2 } from 'lucide-react';
2import { OverlaidBarsChart } from '@/components/component-kit/items/chart-overlaid-bars';
3
4export function Example() {
5  return (
6    <OverlaidBarsChart
7      icon={Building2}
8      title="Seats booked vs capacity"
9      series={{ potential: 'Capacity', actual: 'Booked' }}
10      data={[
11        { label: 'Main Hall', potential: 2400, actual: 1850 },
12        { label: 'Studio', potential: 900, actual: 620 },
13        { label: 'Atrium', potential: 1600, actual: 1340 },
14      ]}
15    />
16  );
17}

Prop

Type

Default

Description

data

OverlaidBarsDatum[]

—

One row per category with potential and actual.

series

{ potential, actual }

Capacity / Booked

Labels for the two values.

showTags

boolean

true

Show the potential in a tag above each column.

Overlaid Bars

Potential behind, actual in front: two values per category in one hue on one scale, with value tags, compact axis ticks and tooltips.

TypeScript Source with Startup & Business plans Light & dark

Seats booked vs capacity

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 { Building2 } from 'lucide-react';
2import { OverlaidBarsChart } from '@/components/component-kit/items/chart-overlaid-bars';
3
4export function Example() {
5  return (
6    <OverlaidBarsChart
7      icon={Building2}
8      title="Seats booked vs capacity"
9      series={{ potential: 'Capacity', actual: 'Booked' }}
10      data={[
11        { label: 'Main Hall', potential: 2400, actual: 1850 },
12        { label: 'Studio', potential: 900, actual: 620 },
13        { label: 'Atrium', potential: 1600, actual: 1340 },
14      ]}
15    />
16  );
17}

Props

Overlaid Bars properties
Prop	Type	Default	Description
`data`	`OverlaidBarsDatum[]`	`—`	One row per category with potential and actual.
`series`	`{ potential, actual }`	`Capacity / Booked`	Labels for the two values.
`showTags`	`boolean`	`true`	Show the potential in a tag above each column.