RNBlocks - React Native Components
[BLOCKS]/Grouped Bar Chart
SYS.UNIT // GROUPED-BAR-CHART

Grouped Bar Chart

A multi-category bar chart with responsive columns and interactive hover tooltips.

RUNTIME: 0.00 KB
STYLES: StyleSheet
PLATFORMS: iOS • Android • Web

// SYSTEM.STAGE

┌┐
SIM.ACTIVE
Financial Performance
revenue
$
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
,
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
profit
$
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
,
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
$
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
,
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
+
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
.
0
1
2
3
4
5
6
7
8
9
%
└┘

Installation

Install the component and its peer dependencies automatically via the CLI:

pnpm dlx @rnblocks/cli add grouped-bar-chart

// SYS.USAGE

Drop this code into your screen or view:

grouped-bar-chart-example.tsx
1import GroupedBarChart from "@/components/grouped-bar-chart";
2 
3export default function FinancialPerformanceScreen() {
4  const financialData = [
5    { label: "Jan", fullDate: "January 2026", revenue: 10400, profit: 3600 },
6    { label: "Feb", fullDate: "February 2026", revenue: 15500, profit: 5200 },
7    { label: "Mar", fullDate: "March 2026", revenue: 12200, profit: 4100 },
8    { label: "Apr", fullDate: "April 2026", revenue: 18900, profit: 7800 },
9    { label: "May", fullDate: "May 2026", revenue: 14200, profit: 4900 },
10    { label: "Jun", fullDate: "June 2026", revenue: 21000, profit: 9200 },
11  ];
12 
13  return (
14    <GroupedBarChart
15      data={financialData}
16      series={[
17        { key: "revenue", label: "revenue" },
18        { key: "profit", label: "profit" },
19      ]}
20      theme="dark"
21      title="Financial Performance"
22      valuePrefix="$"
23      height={240}
24      onSelectGroup={(point, index) => {
25        console.log("Selected group:", point.label, "at index:", index);
26      }}
27    />
28  );
29}

// SPEC.PROPS_API

Configurable interfaces for <GroupedBarChart />

data
GroupedBarDataPoint[]

Dataset containing multi-series numeric values, category labels, and optional full date descriptions.

DEFAULT:DEFAULT_GROUPED_BAR_DATA
series
BarSeriesConfig[]

Array defining each data series with key, display label, and optional custom colors.

DEFAULT:DEFAULT_BAR_SERIES
theme
"dark" | "light"

Color theme mode for canvas surface, grid lines, text tokens, bars, and tooltip backdrop.

DEFAULT:"dark"
title
string

Optional header title displayed above the grouped bar chart.

DEFAULT:undefined
subtitle
string

Optional secondary description displayed below the title.

DEFAULT:undefined
valuePrefix
string

Prefix formatted before numerical metrics in the tooltip (e.g. '$').

DEFAULT:""
valueSuffix
string

Suffix formatted after numerical metrics in the tooltip (e.g. ' pts').

DEFAULT:""
height
number

Height in pixels of the interactive SVG chart visualization.

DEFAULT:240
animated
boolean

Whether to animate bar heights with a staggered spring entrance on mount.

DEFAULT:true
showBackgroundTrack
boolean

Whether to render subtle background vertical tracks behind each group slot.

DEFAULT:true
showLegend
boolean

Whether to display interactive series legend pills with live rolling numbers in the header.

DEFAULT:true
showTooltip
boolean

Whether to render the floating glassmorphic tooltip with animated rolling numbers.

DEFAULT:true
showGridLines
boolean

Whether to render dashed horizontal grid lines across the chart area.

DEFAULT:true
initialIndex
number | null

Optional initial active group index on mount (defaults to null for clean idle state).

DEFAULT:null
onSelectGroup
(point: GroupedBarDataPoint, index: number) => void

Callback fired when a category group is scrubbed, clicked, or tapped.

DEFAULT:undefined

// PERFORMANCE_&_A11Y

Native touch gestures, screen reader attributes, and 60–120 FPS frame budgets:

Chart container declares accessibilityRole='summary' with a high-level spoken narrative generated from data.
allowFontScaling={false} on fixed-pixel tooltip numbers and active category pill to prevent text truncation.
ArrowLeft and ArrowRight keyboard navigation support for full web accessibility.
Mobile PanResponder gesture tracking with auto-clamping ensures accurate thumb scrubbing across all screen widths.
[PREV]Bar Chart
Donut Chart[NEXT]