RNBlocks - React Native Components
[BLOCKS]/Trend Chart
SYS.UNIT // TREND-CHART

Trend Chart

A gradient area trend chart with real-time scrub indicators and value tracking.

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

// SYSTEM.STAGE

┌┐
SIM.ACTIVE
7-Day Activity Trend
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
MON
TUE
WED
THU
FRI
SAT
SUN
−
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
%
growth vs last week
LIVE
5K
2.5K
0
└┘

Installation

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

pnpm dlx @rnblocks/cli add trend-chart

// SYS.USAGE

Drop this code into your screen or view:

trend-chart-example.tsx
1import TrendChart from "@/components/trend-chart";
2 
3export default function PerformanceScreen() {
4  const trendData = [
5    { label: "Mon", value: 1200 },
6    { label: "Tue", value: 2400 },
7    { label: "Wed", value: 1800 },
8    { label: "Thu", value: 3600 },
9    { label: "Fri", value: 2900 },
10    { label: "Sat", value: 4800 },
11    { label: "Sun", value: 4100 },
12  ];
13 
14  return (
15    <TrendChart
16      data={trendData}
17      theme="dark"
18      accentColor="#10B981"
19      title="Revenue Growth"
20      subtitle="vs previous period"
21      height={150}
22      onPointSelect={(point, index) => {
23        console.log("Selected trend point:", point, "at index:", index);
24      }}
25    />
26  );
27}

// SPEC.PROPS_API

Configurable interfaces for <TrendChart />

data
TrendDataPoint[]

Array of data points with numeric value and string label.

DEFAULT:DEMO_CHART_DATA
height
number

Height of the SVG trend line canvas in pixels.

DEFAULT:150
theme
"dark" | "light"

Color theme mode for card background, borders, and typography.

DEFAULT:"dark"
accentColor
string

Accent color for the smooth spline line, gradient glow, and indicator.

DEFAULT:"#10B981"
title
string

Title displayed in the metrics header.

DEFAULT:"7-Day Activity Trend"
subtitle
string

Context note displayed beside the delta percentage badge.

DEFAULT:"growth vs last week"
unit
string

Optional metric unit label displayed beside the rolling value.

DEFAULT:""
onPointSelect
(point: TrendDataPoint, index: number) => void

Callback fired when a data point along the spline is scrubbed or tapped.

DEFAULT:undefined

// PERFORMANCE_&_A11Y

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

Read-only badges and values declare explicit accessibilityLabel without misleading button roles.
allowFontScaling={false} on slot-based odometer numbers prevents clipping on large text devices.
Accessible touch responder coordinates scrubber location across mobile touch events.
High contrast colors tuned for AA compliance across dark and light palettes.
[PREV]Social Auth Buttons