Isometric Bars

Bars with depth, shaded sides and lids; the tallest bar can be highlighted. Morphs between datasets.

Pro<IsometricBarChart />2 variantsiOS · Android · Expo Go

Installation

A Pro chart: one command copies its source into your app (built on the free expo-charts engine, which the CLI installs too). You own the code.

Prop	Type	Default
data One block per category.	{ label, value, color? }[]	—
height Chart height.	number	240
animate Entrance animation.	boolean	true
isLoading Skeleton state.	boolean	false
formatValue Value formatting.	(v) => string	compact
onSelect Tap callback.	(item, index) => void	—
depth 3D depth.	number	10
direction Side the depth goes.	"left" \| "right"	"right"
highlightMax Colour for the tallest bar.	boolean \| string	true
color Bar colour.	string	palette[0]

Did you like the content?

Bars with depth, shaded sides and lids; the tallest bar can be highlighted. Morphs between datasets.

Pro<IsometricBarChart />2 variantsiOS · Android · Expo Go

Pro chart Pro

A Pro chart: one command copies its source into your app (built on the free expo-charts engine, which the CLI installs too). You own the code.

The install command is part of ExpoKit Pro Pro

The usage example is part of ExpoKit Pro Pro

Prop	Type	Default
data One block per category.	{ label, value, color? }[]	—
height Chart height.	number	240
animate Entrance animation.	boolean	true
isLoading Skeleton state.	boolean	false
formatValue Value formatting.	(v) => string	compact
onSelect Tap callback.	(item, index) => void	—
depth 3D depth.	number	10
direction Side the depth goes.	"left" \| "right"	"right"
highlightMax Colour for the tallest bar.	boolean \| string	true
color Bar colour.	string	palette[0]

The source is part of ExpoKit Pro Pro

Did you like the content?