[BLOCKS]/Bar Chart

SYS.UNIT // BAR-CHART

EXPO 52 NATIVE

STRICT_TYPES

Bar Chart

A rounded bar chart with smooth animations, touch scrubbing, and responsive layout.

RUNTIME: 0.00 KB

STYLES: StyleSheet

PLATFORMS: iOS • Android • Web

// SYSTEM.STAGE

Source

┌┐

SIMULATION.ACTIVE// LIVE REACT NATIVE WEBSIM.ACTIVE

WEEKLY VOLUME

Total volume

└┘

Installation

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

pnpm dlx @rnblocks/cli add bar-chart

// SYS.USAGE

Drop this code into your screen or view:

bar-chart-example.tsx

26 lines

1import BarChart from "@/components/bar-chart";
2 
3export default function AnalyticsScreen() {
4  const chartData = [
5    { label: "Mon", value: 1200 },
6    { label: "Tue", value: 2180 },
7    { label: "Wed", value: 1850 },
8    { label: "Thu", value: 2900 },
9    { label: "Fri", value: 2400 },
10    { label: "Sat", value: 3800 },
11    { label: "Sun", value: 3100 },
12  ];
13 
14  return (
15    <BarChart
16      data={chartData}
17      theme="dark"
18      accentColor="#32C798"
19      chartHeight={175}
20      animated={true}
21      onSelectBar={(point, index) => {
22        console.log("Selected point:", point, "at index:", index);
23      }}
24    />
25  );
26}

// SPEC.PROPS_API

Configurable interfaces for <BarChart />

PROP_IDENTIFIER	TYPE_SIGNATURE	DEFAULT_VAL	TELEMETRY_NOTES
data	BarChartDataPoint[]	`SAMPLE_DATA`	Array of chart data points with label, value, and optional secondaryValue or date.
theme	"dark" \| "light"	`"dark"`	Color theme mode for background surfaces, text, and track borders.
accentColor	string	`"#32C798"`	Primary accent color for active bars, highlights, and gradient fills.
title	string	`"Activity Overview"`	Header title displayed at the top of the chart card.
valuePrefix	string	`""`	Optional prefix formatted before numeric values (e.g. '$').
valueSuffix	string	`""`	Optional suffix formatted after numeric values (e.g. ' hrs', ' km').
chartHeight	number	`175`	Height of the SVG chart visualization in pixels.
animated	boolean	`true`	Whether to animate bar heights with a staggered spring animation on mount.
showBackgroundTrack	boolean	`true`	Whether to display subtle background slot tracks behind each bar.
onSelectBar	(point: BarChartDataPoint, index: number) => void	`undefined`	Callback fired when a bar is pressed or hovered.

data

BarChartDataPoint[]

Array of chart data points with label, value, and optional secondaryValue or date.

DEFAULT:SAMPLE_DATA

theme

"dark" | "light"

Color theme mode for background surfaces, text, and track borders.

DEFAULT:"dark"

accentColor

string

Primary accent color for active bars, highlights, and gradient fills.

DEFAULT:"#32C798"

title

string

Header title displayed at the top of the chart card.

DEFAULT:"Activity Overview"

valuePrefix

string

Optional prefix formatted before numeric values (e.g. '$').

DEFAULT:""

valueSuffix

string

Optional suffix formatted after numeric values (e.g. ' hrs', ' km').

DEFAULT:""

chartHeight

number

Height of the SVG chart visualization in pixels.

DEFAULT:175

animated

boolean

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

DEFAULT:true

showBackgroundTrack

boolean

Whether to display subtle background slot tracks behind each bar.

DEFAULT:true

onSelectBar

(point: BarChartDataPoint, index: number) => void

Callback fired when a bar is pressed or hovered.

DEFAULT:undefined

// PERFORMANCE_&_A11Y

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

Individual accessible buttons for each bar declaring accessibilityRole='button'.

Dynamic accessibilityLabel announcing day name and formatted numerical value.

accessibilityState={{ selected }} communicating the active scrub position.

Meets 44x44pt minimum touch target requirements for thumb interaction.

Grouped Bar Chart|[NEXT]