react-native-wagmi-charts 1.0.4 → 1.2.1

package/.prettierrc.js

@@ -0,0 +1,5 @@
+const packageJson = require('./package.json');
+
+const config = packageJson.eslintConfig.rules['prettier/prettier'][1];
+
+module.exports = config;

package/README.md

@@ -35,6 +35,7 @@ A sweet & simple chart library for React Native that will make us feel like **W*
   - [Interactive cursors](#interactive-cursors)
   - [Interactive labels](#interactive-labels)
   - [Interactive tooltips](#interactive-tooltips)
+  - [Haptic feedback](#haptic-feedback)
   - [Colors](#colors)
   - [Customizing size](#customizing-size)
   - [Customizing labels](#customizing-labels)
@@ -63,6 +64,9 @@ A sweet & simple chart library for React Native that will make us feel like **W*
   - [CandlestickChart.useCandleData](#candlestickchartusecandledata)
   - [CandlestickChart.useDatetime](#candlestickchartusedatetime)
   - [CandlestickChart.usePrice](#candlestickchartuseprice)
+- [Web Support (Experimental)](#web-support)
+  - [Disable Transitions](#disable-transitions)
+  - [Reanimated Version](#reanimated-version)
 - [Credits](#credits)
 
 ## Install
@@ -92,26 +96,26 @@ The `LineChart.Provider` component sets up the context of your chart, `LineChart
 > Note: This chart does not include an interactive cursor like in the animated example above. If you want one, [check out the "Interactive Cursors" guide](#interactive-cursors)
 
 ```jsx
-import { LineChart } from 'react-native-wagmi-charts'; 
+import { LineChart } from 'react-native-wagmi-charts';
 
 const data = [
   {
     timestamp: 1625945400000,
-    value: 33575.25
+    value: 33575.25,
   },
   {
     timestamp: 1625946300000,
-    value: 33545.25
+    value: 33545.25,
   },
   {
     timestamp: 1625947200000,
-    value: 33510.25
+    value: 33510.25,
   },
   {
     timestamp: 1625948100000,
-    value: 33215.25
-  }
-]
+    value: 33215.25,
+  },
+];
 
 function Example() {
   return (
@@ -120,7 +124,7 @@ function Example() {
         <LineChart.Path />
       </LineChart>
     </LineChart.Provider>
-  )
+  );
 }
 ```
 
@@ -133,7 +137,7 @@ The `CandlestickChart.Provider` component sets up the context of your chart, `Ca
 > Note: This chart does not include an interactive cursor like in the animated example above. If you want one, [check out the "Interactive Cursors" guide](#interactive-cursors)
 
 ```jsx
-import { CandlestickChart } from 'react-native-wagmi-charts'; 
+import { CandlestickChart } from 'react-native-wagmi-charts';
 
 const data = [
   {
@@ -141,30 +145,30 @@ const data = [
     open: 33575.25,
     high: 33600.52,
     low: 33475.12,
-    close: 33520.11
+    close: 33520.11,
   },
   {
     timestamp: 1625946300000,
     open: 33545.25,
     high: 33560.52,
     low: 33510.12,
-    close: 33520.11
+    close: 33520.11,
   },
   {
     timestamp: 1625947200000,
     open: 33510.25,
     high: 33515.52,
     low: 33250.12,
-    close: 33250.11
+    close: 33250.11,
   },
   {
     timestamp: 1625948100000,
     open: 33215.25,
     high: 33430.52,
     low: 33215.12,
-    close: 33420.11
-  }
-]
+    close: 33420.11,
+  },
+];
 
 function Example() {
   return (
@@ -173,7 +177,7 @@ function Example() {
         <CandlestickChart.Candles />
       </CandlestickChart>
     </CandlestickChart.Provider>
-  )
+  );
 }
 ```
 
@@ -213,7 +217,6 @@ To render an interactive cursor on your line chart, you can include either the `
 
 <img src="https://user-images.githubusercontent.com/7336481/133027471-1c620ece-a95e-46b7-bd92-50f33757ce92.gif" width="200px" />
 
-
 #### Candlestick chart
 
 To render an interactive cursor on your candlestick chart, you can include the `CandlestickChart.Crosshair` component:
@@ -328,6 +331,64 @@ To render an interactive tooltip that follows your crosshair, you can use the `T
 
 <img src="https://user-images.githubusercontent.com/7336481/133036451-e1f2f12b-9e96-4a0f-8c69-4f630bb8ded3.gif" width="200px" />
 
+### Haptic feedback
+
+By making use of the chart event handlers, you are able to integrate haptic feedback into your charts.
+
+#### Line charts
+
+We can utilise the `onActivated` and `onEnded` events to create haptic feedback on our line chart.
+
+```jsx
+import * as haptics from 'expo-haptics';
+
+const data = [...];
+
+function invokeHaptic() {
+  haptics.impactAsync(haptics.ImpactFeedbackStyle.Light);
+}
+
+function Example() {
+  return (
+    <LineChart.Provider data={data}>
+      <LineChart>
+        <LineChart.Path />
+        <LineChart.CursorCrosshair onActivated={invokeHaptic} onEnded={invokeHaptic}>
+          <LineChart.Tooltip />
+        </LineChart.CursorCrosshair>
+      </LineChart>
+    </LineChart.Provider>
+  )
+}
+```
+
+#### Candlestick charts
+
+We can utilise the `onCurrentXChange` event to create haptic feedback on our candlestick chart.
+
+```jsx
+import * as haptics from 'expo-haptics';
+
+const data = [...];
+
+function invokeHaptic() {
+  haptics.impactAsync(haptics.ImpactFeedbackStyle.Light);
+}
+
+function Example() {
+  return (
+    <CandlestickChart.Provider data={data}>
+      <CandlestickChart>
+        <CandlestickChart.Candles />
+        <CandlestickChart.Crosshair onCurrentXChange={invokeHaptic}>
+          <CandlestickChart.Tooltip />
+        </CandlestickChart.Crosshair>
+      </CandlestickChart>
+    </CandlestickChart.Provider>
+  )
+}
+```
+
 ### Colors
 
 By default, the charts come with default colors out-of-the-box... But you probably will want to change these to suit your brand.
@@ -348,7 +409,6 @@ To customise the color of the line chart path, supply a `color` prop to `LineCha
 
 <img src="https://user-images.githubusercontent.com/7336481/133037040-ce13ba5b-6ee5-45a2-ba14-18bf12e13746.png" width="200px" />
 
-
 ##### Coloring the cursor
 
 To customise the color of the line chart cursor, supply a `color` prop to `LineChart.CursorCrosshair`. This can be any valid React Native `StyleSheet` compatible color.
@@ -382,7 +442,6 @@ To customise the color of the candlestick chart candles, supply a `negativeColor
 
 <img width="200px" alt="Screen Shot 2021-09-13 at 4 58 52 pm" src="https://user-images.githubusercontent.com/7336481/133037949-aba76daa-20bb-4d4e-b05e-b0cff42b69a6.png">
 
-
 ##### Coloring the crosshair
 
 To customise the color of the line chart cursor, supply a `color` prop to `CandlestickChart.Crosshair`. This can be any valid React Native `StyleSheet` compatible color.
@@ -504,11 +563,7 @@ You can customize the gutters of the tooltip by providing `cursorGutter`, `xGutt
 `xGutter` and `yGutter` is the gutter on the x & y axis of the chart (the tooltip can't pass the gutter).
 
 ```jsx
-<LineChart.Tooltip 
-  cursorGutter={60} 
-  xGutter={16} 
-  yGutter={16} 
-/>
+<LineChart.Tooltip cursorGutter={60} xGutter={16} yGutter={16} />
 ```
 
 <img src="https://user-images.githubusercontent.com/7336481/133054393-28d542c1-c9fc-4ba6-b4a0-86cf096ebcda.gif" width="200px" />
@@ -533,22 +588,23 @@ You can customize the gutters of the tooltip by providing `cursorGutter`, `xGutt
 
 ### LineChart.Path
 
-| Prop       | Type        | Default   | Description                                                   |
-| ---------- | ----------- | --------- | ------------------------------------------------------------- |
-| `color`    | `string`    | `"black"` | Color of the line path                                        |
-| `width`    | `number`    | `3`       | Width of the line path                                        |
-| `...props` | `PathProps` |           | This component also inherits React Native SVG's `Path` props. |
+| Prop        | Type        | Default   | Description                      |
+| ----------- | ----------- | --------- | -------------------------------- |
+| `color`     | `string`    | `"black"` | Color of the line path           |
+| `width`     | `number`    | `3`       | Width of the line path           |
+| `pathProps` | `PathProps` | `{}`      | React Native SVG's `Path` props. |
 
 ### LineChart.CursorCrosshair
 
-| Prop                    | Type        | Default   | Description                                     |
-| ----------------------- | ----------- | --------- | ----------------------------------------------- |
-| `color`                 | `string`    | `"black"` | Color of the crosshair dot                      |
-| `size`                  | `number`    | `8`       | Size of the crosshair dot                       |
-| `outerSize`             | `number`    | `32`      | Size of the outer crosshair dot (faded dot)     |
-| `crosshairWrapperProps` | `ViewProps` |           | Props of the wrapper component of the crosshair |
-| `crosshairProps`        | `ViewProps` |           | Props of the crosshair dot                      |
-| `crosshairOuterProps`   | `ViewProps` |           | Props of the crosshair outer dot                |
+| Prop                    | Type                           | Default   | Description                                     |
+| ----------------------- | ------------------------------ | --------- | ----------------------------------------------- |
+| `color`                 | `string`                       | `"black"` | Color of the crosshair dot                      |
+| `size`                  | `number`                       | `8`       | Size of the crosshair dot                       |
+| `outerSize`             | `number`                       | `32`      | Size of the outer crosshair dot (faded dot)     |
+| `crosshairWrapperProps` | `ViewProps`                    |           | Props of the wrapper component of the crosshair |
+| `crosshairProps`        | `ViewProps`                    |           | Props of the crosshair dot                      |
+| `crosshairOuterProps`   | `ViewProps`                    |           | Props of the crosshair outer dot                |
+| `...props`              | `LongPressGestureHandlerProps` |           |                                                 |
 
 ### LineChart.CursorLine
 
@@ -559,31 +615,31 @@ You can customize the gutters of the tooltip by providing `cursorGutter`, `xGutt
 
 ### LineChart.Tooltip
 
-| Prop           | Type               | Default | Description                                          |
-| -------------- | ------------------ | ------- | ---------------------------------------------------- |
-| `xGutter`      | `number`           | `8`     | X axis gutter in which the tooltip will not pass.    |
-| `yGutter`      | `number`           | `8`     | Y axis gutter in which the tooltip will not pass.    |
-| `cursorGutter` | `number`           | `48`    | Gutter (spacing) between the cursor and the tooltip. |
-| `position`     | `"top" | "bottom"` | `"top"` | Position of the tooltip relative to the cursor.      |
+| Prop           | Type     | Default   | Description                                          |
+| -------------- | -------- | --------- | ---------------------------------------------------- | ----------------------------------------------- |
+| `xGutter`      | `number` | `8`       | X axis gutter in which the tooltip will not pass.    |
+| `yGutter`      | `number` | `8`       | Y axis gutter in which the tooltip will not pass.    |
+| `cursorGutter` | `number` | `48`      | Gutter (spacing) between the cursor and the tooltip. |
+| `position`     | `"top"   | "bottom"` | `"top"`                                              | Position of the tooltip relative to the cursor. |
 
 ### LineChart.PriceText
 
-| Prop        | Type                               | Default       | Description                                |
-| ----------- | ---------------------------------- | ------------- | ------------------------------------------ |
-| `format`    | `({ value, formatted }) => string` |               | Custom format function of the price.       |
-| `precision` | `number`                           | `2`           | Default precision of the price.            |
-| `variant`   | `"formatted" | "value"`            | `"formatted"` | Default representation of the price value. |
-| `...props`  | `TextProps`                        |               | Inherits React Native's `Text` props       |
+| Prop        | Type                               | Default  | Description                          |
+| ----------- | ---------------------------------- | -------- | ------------------------------------ | ------------------------------------------ |
+| `format`    | `({ value, formatted }) => string` |          | Custom format function of the price. |
+| `precision` | `number`                           | `2`      | Default precision of the price.      |
+| `variant`   | `"formatted"                       | "value"` | `"formatted"`                        | Default representation of the price value. |
+| `...props`  | `TextProps`                        |          | Inherits React Native's `Text` props |
 
 ### LineChart.DatetimeText
 
-| Prop      | Type                               | Default       | Description                                                                                                                                                               |
-| --------- | ---------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `format`  | `({ value, formatted }) => string` |               | Custom format function of the timestamp.                                                                                                                                  |
-| `locale`  | `string`                           | `"en-US"`     | Locale of the timestamp.                                                                                                                                                  |
-| `options` | `{}`                               |               | Options to pass to `toLocaleString()`. [Available options are here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) |
-| `style`   | `{}`                               |               | Style of the price text                                                                                                                                                   |
-| `variant` | `"formatted" | "value"`            | `"formatted"` | Default representation of the timestamp value.                                                                                                                            |
+| Prop      | Type                               | Default   | Description                                                                                                                                                               |
+| --------- | ---------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
+| `format`  | `({ value, formatted }) => string` |           | Custom format function of the timestamp.                                                                                                                                  |
+| `locale`  | `string`                           | `"en-US"` | Locale of the timestamp.                                                                                                                                                  |
+| `options` | `{}`                               |           | Options to pass to `toLocaleString()`. [Available options are here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) |
+| `style`   | `{}`                               |           | Style of the price text                                                                                                                                                   |
+| `variant` | `"formatted"                       | "value"`  | `"formatted"`                                                                                                                                                             | Default representation of the timestamp value. |
 
 ### CandlestickChart.Provider
 
@@ -613,9 +669,11 @@ You can customize the gutters of the tooltip by providing `cursorGutter`, `xGutt
 
 ### CandlestickChart.Crosshair
 
-| Prop    | Type     | Default   | Description            |
-| ------- | -------- | --------- | ---------------------- |
-| `color` | `string` | `"black"` | Color of the crosshair |  |
+| Prop               | Type                           | Default   | Description                                      |
+| ------------------ | ------------------------------ | --------- | ------------------------------------------------ | --- |
+| `color`            | `string`                       | `"black"` | Color of the crosshair                           |     |
+| `onCurrentXChange` | `(xValue: number) => void`     |           | Callback to invoke when the x coordinate changes |
+| `...props`         | `LongPressGestureHandlerProps` |           |                                                  |
 
 ### CandlestickChart.Tooltip
 
@@ -625,41 +683,37 @@ You can customize the gutters of the tooltip by providing `cursorGutter`, `xGutt
 | `yGutter`          | `number`         | `8`     | Y axis gutter in which the tooltip will not pass. |
 | `tooltipTextProps` | `PriceTextProps` |         | Props of the tooltip (price) text.                |
 | `textStyle`        | `{}`             |         | Style of the tooltip text                         |
+
 ### CandlestickChart.PriceText
 
-| Prop        | Type                               | Default       | Description                                |
-| ----------- | ---------------------------------- | ------------- | ------------------------------------------ |
-| `format`    | `({ value, formatted }) => string` |               | Custom format function of the price.       |
-| `precision` | `number`                           | `2`           | Default precision of the price.            |
-| `variant`   | `"formatted" | "value"`            | `"formatted"` | Default representation of the price value. |
-| `...props`  | `TextProps`                        |               | Inherits React Native's `Text` props       |
+| Prop        | Type                               | Default  | Description                          |
+| ----------- | ---------------------------------- | -------- | ------------------------------------ | ------------------------------------------ |
+| `format`    | `({ value, formatted }) => string` |          | Custom format function of the price. |
+| `precision` | `number`                           | `2`      | Default precision of the price.      |
+| `variant`   | `"formatted"                       | "value"` | `"formatted"`                        | Default representation of the price value. |
+| `...props`  | `TextProps`                        |          | Inherits React Native's `Text` props |
 
 ### CandlestickChart.DatetimeText
 
-| Prop      | Type                               | Default       | Description                                                                                                                                                               |
-| --------- | ---------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `format`  | `({ value, formatted }) => string` |               | Custom format function of the timestamp.                                                                                                                                  |
-| `locale`  | `string`                           | `"en-US"`     | Locale of the timestamp.                                                                                                                                                  |
-| `options` | `{}`                               |               | Options to pass to `toLocaleString()`. [Available options are here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) |
-| `style`   | `{}`                               |               | Style of the price text                                                                                                                                                   |
-| `variant` | `"formatted" | "value"`            | `"formatted"` | Default representation of the timestamp value.                                                                                                                            |
+| Prop      | Type                               | Default   | Description                                                                                                                                                               |
+| --------- | ---------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
+| `format`  | `({ value, formatted }) => string` |           | Custom format function of the timestamp.                                                                                                                                  |
+| `locale`  | `string`                           | `"en-US"` | Locale of the timestamp.                                                                                                                                                  |
+| `options` | `{}`                               |           | Options to pass to `toLocaleString()`. [Available options are here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) |
+| `style`   | `{}`                               |           | Style of the price text                                                                                                                                                   |
+| `variant` | `"formatted"                       | "value"`  | `"formatted"`                                                                                                                                                             | Default representation of the timestamp value. |
 
 ## Hooks
 
 The following hooks are only accessible inside the `LineChart.Provider` or `CandlestickChart.Provider`.
+
 ### LineChart.useChart
 
 The `LineChart.useChart` hook returns the current state of the chart.
 
 ```jsx
-const {
-  currentX,     
-  currentY,     
-  currentIndex, 
-  data,         
-  domain,       
-  isActive      
-} = LineChart.useChart();
+const { currentX, currentY, currentIndex, data, domain, isActive } =
+  LineChart.useChart();
 ```
 
 #### Reference
@@ -678,14 +732,11 @@ const {
 ### LineChart.useDatetime
 
 ```jsx
-const {
-  value,
-  formatted
-} = LineChart.useDatetime({
+const { value, formatted } = LineChart.useDatetime({
   format,
   locale,
-  options
-})
+  options,
+});
 ```
 
 #### Reference
@@ -708,13 +759,10 @@ const {
 ### LineChart.usePrice
 
 ```jsx
-const {
-  value,
-  formatted
-} = LineChart.usePrice({
+const { value, formatted } = LineChart.usePrice({
   format,
-  precision
-})
+  precision,
+});
 ```
 
 **Arguments**
@@ -734,13 +782,7 @@ const {
 ### CandlestickChart.useChart
 
 ```jsx
-const {
-  currentX,     
-  currentY,     
-  data,         
-  domain,       
-  step      
-} = CandlestickChart.useChart();
+const { currentX, currentY, data, domain, step } = CandlestickChart.useChart();
 ```
 
 #### Reference
@@ -760,13 +802,7 @@ const {
 The `useCandleData` hook returns the current candle data.
 
 ```jsx
-const {
-  timestamp,
-  open,
-  high,
-  low,
-  close    
-} = CandlestickChart.useCandleData();
+const { timestamp, open, high, low, close } = CandlestickChart.useCandleData();
 ```
 
 #### Reference
@@ -781,18 +817,14 @@ const {
 | `low`       | `number` |         |             |
 | `close`     | `number` |         |             |
 
-
 ### CandlestickChart.useDatetime
 
 ```jsx
-const {
-  value,
-  formatted
-} = CandlestickChart.useDatetime({
+const { value, formatted } = CandlestickChart.useDatetime({
   format,
   locale,
-  options
-})
+  options,
+});
 ```
 
 #### Reference
@@ -812,17 +844,13 @@ const {
 | `value`     | `string` |         | Timestamp value in ms.    |
 | `formatted` | `string` |         | Formatted timestamp value |
 
-
 ### CandlestickChart.usePrice
 
 ```jsx
-const {
-  value,
-  formatted
-} = CandlestickChart.usePrice({
+const { value, formatted } = CandlestickChart.usePrice({
   format,
-  precision
-})
+  precision,
+});
 ```
 
 **Arguments**
@@ -839,11 +867,33 @@ const {
 | `value`     | `string` |         | Price value           |
 | `formatted` | `string` |         | Formatted price value |
 
+## Web Support
+
+Web support is currently experimental.
+
+Currently, transitions for a line chart's path flicker a little. You can disable them on Web with the `isTransitionEnabled` prop.
+
+### Disable Transitions
+
+```tsx
+import { Platform } from 'react-native';
+
+const isWeb = Platform.OS === 'web'
+
+<LineChart.Path
+  pathProps={{
+    isTransitionEnabled: !isWeb,
+  }}
+/>;
+```
+
+### Reanimated Version
 
+In order to support SVG animations on Web, you'll need at least Reanimated version `2.3.0-beta.2`. Or, you can use the patch from [Issue #8](https://github.com/coinjar/react-native-wagmi-charts/issues/8#issuecomment-938097099).
 
 ## Credits
 
 This library wouldn't be possible if it weren't for:
 
 - [Rainbow's Animated Charts](https://github.com/rainbow-me/react-native-animated-charts)
-- @wcandillon and his [Can It Be Done In React Native](www.youtube.com/wcandillon) series 💪😍  
+- @wcandillon and his [Can It Be Done In React Native](www.youtube.com/wcandillon) series 💪😍

package/example/README.md

@@ -0,0 +1,32 @@
+# react-native-wagmi-charts Example Project 🧑‍🏫
+
+## Getting Started
+
+First install project dependencies in this directory:
+
+`npm install`
+
+After dependencies are installed, you can go ahead and run the project on either a simulator, or a real device using the following commands
+
+For iOS:
+
+`npm run ios`
+
+For Android:
+
+`npm run android`
+
+For Web:
+
+`npm run web`
+
+
+## Example Charts
+
+The following charts are included:
+
+- Candlestick Chart
+- Line Chart
+
+### Sample Data
+The charts in this example use hardcoded data, which is stored in the `src/data` directory

package/example/package.json

@@ -15,12 +15,12 @@
     "bumbag": "^2.2.1",
     "bumbag-native": "^2.3.0",
     "expo": "42.0.1",
+    "expo-haptics": "^10.1.0",
     "expo-splash-screen": "~0.11.2",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "0.63.4",
     "react-native-gesture-handler": "~1.10.2",
-    "react-native-haptic-feedback": "^1.11.0",
     "react-native-reanimated": "~2.2.0",
     "react-native-unimodules": "~0.14.5",
     "react-native-web": "~0.13.12"

package/example/src/App.tsx

@@ -1,6 +1,13 @@
 import * as React from 'react';
 import 'react-native-gesture-handler';
-import { Box, Text, Provider as BumbagNativeProvider } from 'bumbag-native';
+import {
+  Box,
+  Button,
+  Text,
+  Heading,
+  Level,
+  Provider as BumbagNativeProvider,
+} from 'bumbag-native';
 
 import CandlestickChart from './CandlestickChart';
 import LineChart from './LineChart';
@@ -10,19 +17,37 @@ export default function App() {
   return (
     <BumbagNativeProvider>
       <Box.Safe flex="1">
+        <Level
+          verticalBelow=""
+          paddingX="major-2"
+          paddingY="major-2"
+          alignY="center"
+        >
+          <Heading.H5 key={'heading'}>React Native WAGMI Charts 💸</Heading.H5>
+          {selected ? (
+            <Button size="small" onPress={() => setSelected('')}>
+              Back
+            </Button>
+          ) : null}
+        </Level>
         <Box.Scroll>
           {!selected && (
             <Box paddingX="major-2" marginTop="major-6">
-              <Box.Touchable onPress={() => setSelected('candlestick')}>
+              <Heading.H6 marginBottom="major-2">
+                Click a chart below to get started
+              </Heading.H6>
+              <Button onPress={() => setSelected('candlestick')}>
                 <Text>Candlestick</Text>
-              </Box.Touchable>
-              <Box.Touchable onPress={() => setSelected('line')}>
+              </Button>
+              <Button onPress={() => setSelected('line')}>
                 <Text>Line</Text>
-              </Box.Touchable>
+              </Button>
             </Box>
           )}
-          {selected === 'candlestick' && <CandlestickChart />}
-          {selected === 'line' && <LineChart />}
+          <Box marginTop="major-2">
+            {selected === 'candlestick' && <CandlestickChart />}
+            {selected === 'line' && <LineChart />}
+          </Box>
         </Box.Scroll>
       </Box.Safe>
     </BumbagNativeProvider>