Price Chart
The fintech chart: a big price and change that follow your finger, 1D / 1W / 1M / 1Y / ALL tabs, green or red by trend and a dashed open line. One component, no wiring.
<PriceChart />1 variantNew in 2.0.1
Live — the real React Native component rendered with react-native-web. Tap, drag and scrub it.
Installation
terminal
npx expo install expo-charts react-native-svgUsage
Import the component and pass your data. Width defaults to the parent, so it adapts to phones, tablets and rotation.
PriceChart.tsx
<PriceChart title="BTC · Bitcoin" ranges={{ "1D": today, "1W": week, "1M": month, "1Y": year, ALL: all }} defaultRange="1M"/>Props
| Prop | Type | Default |
|---|---|---|
| ranges Points per tab, in tab order. | Record<string, { label, value }[]> | — |
| data Single series instead of ranges. | { label, value }[] | — |
| defaultRange / onRangeChange Tabs. | string / (range) => void | first key / — |
| title / height / color Look. | string / number / string | — / 200 / green or red |
| showBaseline Dashed line at the first value of the range. | boolean | true |
| formatValue / formatChange Header text. | (v) => string | $1,234.56 |
| onScrub Point under the finger (null on release). | (point, index) => void | — |
| onScrubStart / onScrubEnd Pause your ScrollView while scrubbing. | () => void | — |
| animate Entrance and tab pill motion. | boolean | true |
Did you like the content?