Implement line chart in the StaticBox

src/components/StandardLineChart.tsx

@@ -0,0 +1,53 @@
+import { ResponsiveLine } from '@nivo/line'
+
+const MyResponsiveLine = () => {
+  const data = [
+    {
+      id: 'japan',
+      color: 'hsl(315, 70%, 50%)',
+      data: [
+        {
+          x: 'plane',
+          y: 34,
+        },
+        {
+          x: 'helicopter',
+          y: 60,
+        },
+        {
+          x: 'boat',
+          y: 20,
+        },
+      ],
+    },
+  ]
+  return (
+    <ResponsiveLine
+      data={data}
+      margin={{ top: 0, right: 0, bottom: 0, left: 30 }}
+      xScale={{ type: 'point' }}
+      yScale={{
+        type: 'linear',
+        min: 'auto',
+        max: 'auto',
+        stacked: true,
+        reverse: false,
+      }}
+      axisTop={null}
+      axisRight={null}
+      axisBottom={null}
+      axisLeft={null}
+      enableGridX={false}
+      enableGridY={false}
+      enablePoints={false}
+      pointSize={10}
+      pointColor={{ theme: 'background' }}
+      pointBorderWidth={2}
+      pointBorderColor={{ from: 'serieColor' }}
+      pointLabelYOffset={-12}
+      useMesh={true}
+      legends={[]}
+    />
+  )
+}
+export default MyResponsiveLine

src/components/StaticBox.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode, CSSProperties } from 'react'
 import { Paragraph, Separator, Text, XStack, YStack } from 'tamagui'
 import { styled } from 'tamagui'
 import { Image } from 'tamagui'
+import MyResponsiveLine from './StandardLineChart'
 
 interface IconProps {
   source: string
@@ -74,7 +75,9 @@ const StatisticBox: React.FC<StatisticBoxProps> = ({
             position: 'relative', // Make XStack a positioning context
           }}
         >
-          {/* Here add chart */}
+          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
+            <MyResponsiveLine />
+          </div>
 
           <YStack space={'$3'}>
             <Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>