RNBlocks - React Native Components
[BLOCKS]/Comparison Chart
SYS.UNIT // COMPARISON-CHART

Comparison Chart

A dual-series comparison spline chart with interactive touch scrubbing and tooltips.

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

// SYSTEM.STAGE

┌┐
SIM.ACTIVE
Performance Overview
Revenue vs Costs
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
costs
$
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
Jan
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
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
costs
$
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
Jan
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 comparison-chart

// SYS.USAGE

Drop this code into your screen or view:

comparison-chart-example.tsx
1import ComparisonChart from "@/components/comparison-chart";
2 
3export default function PerformanceScreen() {
4  const performanceData = [
5    { label: "Jan 21", fullDate: "Sun, Jan 21", revenue: 3200, costs: 5800 },
6    { label: "Jan 22", fullDate: "Mon, Jan 22", revenue: 3900, costs: 5100 },
7    { label: "Jan 23", fullDate: "Tue, Jan 23", revenue: 4800, costs: 4300 },
8    { label: "Jan 24", fullDate: "Wed, Jan 24", revenue: 5800, costs: 3600 },
9    { label: "Jan 25", fullDate: "Thu, Jan 25", revenue: 6400, costs: 3300 },
10    { label: "Jan 26", fullDate: "Fri, Jan 26", revenue: 6200, costs: 3800 },
11    { label: "Jan 27", fullDate: "Sat, Jan 27", revenue: 5500, costs: 4700 },
12    { label: "Jan 28", fullDate: "Sun, Jan 28", revenue: 4800, costs: 5800 },
13  ];
14 
15  return (
16    <ComparisonChart
17      data={performanceData}
18      series={[
19        { key: "revenue", label: "revenue", color: "#32C798" },
20        { key: "costs", label: "costs", color: "#818CF8" },
21      ]}
22      theme="dark"
23      title="Revenue vs Costs"
24      valuePrefix="$"
25      height={220}
26      onPointSelect={(point, index) => {
27        console.log("Scrubbed point:", point, "at index:", index);
28      }}
29    />
30  );
31}

// SPEC.PROPS_API

Configurable interfaces for <ComparisonChart />

data
ComparisonDataPoint[]

Dataset containing multi-series numeric values, short x-axis labels, and full formatted dates.

DEFAULT:DEFAULT_COMPARISON_DATA
series
SeriesConfig[]

Array defining each data series with key, display label, and line/indicator color.

DEFAULT:DEFAULT_SERIES
theme
"dark" | "light"

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

DEFAULT:"dark"
title
string

Header title displayed above the comparative spline visualization.

DEFAULT:"Performance Overview"
valuePrefix
string

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

DEFAULT:"$"
valueSuffix
string

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

DEFAULT:""
height
number

Height in pixels of the interactive SVG canvas area.

DEFAULT:220
showTooltip
boolean

Whether to render the floating glassmorphic tooltip card that tracks the scrub cursor.

DEFAULT:true
missingData
"interpolate" | "zero" | "gap"

Strategy for handling null or undefined values in series data points ('interpolate' linearly estimates missing points smoothly, 'zero' plots missing values at 0, 'gap' gracefully interpolates).

DEFAULT:"interpolate"
accessibilityLabel
string

Custom accessibility narrative override for screen readers.

DEFAULT:undefined
formatValue
(value: number) => string

Custom formatter function for numerical values in legend and tooltip.

DEFAULT:undefined
onPointSelect
(point: ComparisonDataPoint, index: number) => void

Callback fired when a data point is scrubbed or tapped.

DEFAULT:undefined

// PERFORMANCE_&_A11Y

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

Container declares accessibilityRole='summary' with a dynamic, high-level spoken narrative.
Interactive series legend pills declare accessibilityRole='button' and accessibilityState={{ selected }}.
allowFontScaling={false} on fixed-pixel tooltip numbers and active date pills prevents text truncation.
Touch responder maintains comfortable continuous touch and mouse tracking across mobile and desktop.
[PREV]Floating Docker
Social Auth Buttons[NEXT]