diff --git a/src/screens/NewAnalytics/Graphs/LineGraph/LineGraph.res b/src/screens/NewAnalytics/Graphs/LineGraph/LineGraph.res
index ff41d2903..94e35ae77 100644
--- a/src/screens/NewAnalytics/Graphs/LineGraph/LineGraph.res
+++ b/src/screens/NewAnalytics/Graphs/LineGraph/LineGraph.res
@@ -1,16 +1,8 @@
+external lineGraphOptionsToJson: LineGraphTypes.lineGraphOptions => JSON.t = "%identity"
 @react.component
-let make = (~entity) => {
+let make = (~entity, ~data: JSON.t) => {
   open NewAnalyticsTypes
-  open NewAnalyticsHelper
-
-  let options = JSON.Encode.string("")->entity.getObjects->entity.getChatOptions
-
-  <div>
-    <h2 className="font-semibold text-xl text-jp-gray-900 pb-5"> {entity.title->React.string} </h2>
-    <Card>
-      <div className="mr-3 my-10">
-        <Highcharts.Chart options highcharts={Highcharts.highcharts} />
-      </div>
-    </Card>
-  </div>
+  let data = entity.getObjects(data)
+  let options = entity.getChatOptions(data)
+  <Highcharts.Chart options={options->lineGraphOptionsToJson} highcharts={Highcharts.highcharts} />
 }
diff --git a/src/screens/NewAnalytics/Graphs/LineGraph/LineGraphTypes.res b/src/screens/NewAnalytics/Graphs/LineGraph/LineGraphTypes.res
index 1b42f5d1f..5f7a55b4d 100644
--- a/src/screens/NewAnalytics/Graphs/LineGraph/LineGraphTypes.res
+++ b/src/screens/NewAnalytics/Graphs/LineGraph/LineGraphTypes.res
@@ -1,6 +1,84 @@
-type seriresType = {
-  showInLegend: bool,
-  name: string,
+type \"type" = string
+type spacingLeft = int
+type spacingRight = int
+
+type categories = array<string>
+type crosshair = bool
+type lineWidth = int
+type tickWidth = int
+type align = string
+type color = string
+type y = int
+type gridLineWidth = int
+type gridLineColor = string
+type gridLineDashStyle = string
+type tickmarkPlacement = string
+type endOnTick = bool
+type startOnTick = bool
+type min = int
+type showInLegend = bool
+type name = string
+
+type title = {text: string}
+type style = {color: color}
+type enabled = {enabled: bool}
+type credits = {
+  ...enabled,
+}
+type exporting = {
+  ...enabled,
+}
+type marker = {
+  ...enabled,
+}
+type line = {marker: marker}
+type plotOptions = {line: line}
+type labels = {
+  align: align,
+  style: style,
+  y: y,
+}
+type chart = {
+  \"type": \"type",
+  spacingLeft: spacingLeft,
+  spacingRight: spacingRight,
+}
+type data = {
+  showInLegend: showInLegend,
+  name: name,
   data: array<int>,
-  color: string,
+  color: color,
+}
+
+type yAxis = {
+  title: title,
+  gridLineWidth: gridLineWidth,
+  gridLineColor: gridLineColor,
+  gridLineDashStyle: gridLineDashStyle,
+  min: min,
+}
+
+type xAxis = {
+  categories: categories,
+  crosshair: crosshair,
+  lineWidth: lineWidth,
+  tickWidth: tickWidth,
+  labels: labels,
+  gridLineWidth: gridLineWidth,
+  gridLineColor: gridLineColor,
+  tickmarkPlacement: tickmarkPlacement,
+  endOnTick: endOnTick,
+  startOnTick: startOnTick,
+}
+
+type lineGraphOptions = {
+  chart: chart,
+  title: title,
+  xAxis: xAxis,
+  yAxis: yAxis,
+  plotOptions: plotOptions,
+  series: data,
+  credits: credits,
 }
+
+type lineGraphPayload = {categories: categories, data: data, title: title}
diff --git a/src/screens/NewAnalytics/Graphs/LineGraph/LineGraphUtils.res b/src/screens/NewAnalytics/Graphs/LineGraph/LineGraphUtils.res
index 8b1378917..a6f75b430 100644
--- a/src/screens/NewAnalytics/Graphs/LineGraph/LineGraphUtils.res
+++ b/src/screens/NewAnalytics/Graphs/LineGraph/LineGraphUtils.res
@@ -1 +1,50 @@
-
+open LineGraphTypes
+let getLineGraphOptions = (lineGraphOptions: lineGraphPayload) => {
+  let {categories, data, title} = lineGraphOptions
+  {
+    chart: {
+      \"type": "line",
+      spacingLeft: 20,
+      spacingRight: 20,
+    },
+    title: {
+      text: "",
+    },
+    xAxis: {
+      categories,
+      crosshair: true,
+      lineWidth: 1,
+      tickWidth: 1,
+      labels: {
+        align: "center",
+        style: {
+          color: "#666",
+        },
+        y: 35,
+      },
+      gridLineWidth: 1,
+      gridLineColor: "#e6e6e6",
+      tickmarkPlacement: "on",
+      endOnTick: false,
+      startOnTick: false,
+    },
+    yAxis: {
+      title,
+      gridLineWidth: 1,
+      gridLineColor: "#e6e6e6",
+      gridLineDashStyle: "Dash",
+      min: 0,
+    },
+    plotOptions: {
+      line: {
+        marker: {
+          enabled: false,
+        },
+      },
+    },
+    series: data,
+    credits: {
+      enabled: false,
+    },
+  }
+}
diff --git a/src/screens/NewAnalytics/Graphs/SankyGraph/SankeyGraph.res b/src/screens/NewAnalytics/Graphs/SankyGraph/SankeyGraph.res
index ffe08bdfd..88d76d9d8 100644
--- a/src/screens/NewAnalytics/Graphs/SankyGraph/SankeyGraph.res
+++ b/src/screens/NewAnalytics/Graphs/SankyGraph/SankeyGraph.res
@@ -1,8 +1,12 @@
+external sankeyGraphOptionsToJson: SankeyGraphTypes.sankeyGraphOptions => JSON.t = "%identity"
+
 @react.component
-let make = (~options) => {
+let make = (~entity, ~data: JSON.t) => {
+  open NewAnalyticsTypes
   Highcharts.sankeyChartModule(Highcharts.highchartsModule)
-
+  let data = entity.getObjects(data)
+  let options = entity.getChatOptions(data)
   <Highcharts.Chart
-    options={options->Identity.genericTypeToJson} highcharts={Highcharts.highcharts}
+    options={options->sankeyGraphOptionsToJson} highcharts={Highcharts.highcharts}
   />
 }
diff --git a/src/screens/NewAnalytics/OverViewAnalytics/OverViewAnalytics.res b/src/screens/NewAnalytics/OverViewAnalytics/OverViewAnalytics.res
index 4aae4199e..5ffd15c47 100644
--- a/src/screens/NewAnalytics/OverViewAnalytics/OverViewAnalytics.res
+++ b/src/screens/NewAnalytics/OverViewAnalytics/OverViewAnalytics.res
@@ -1,6 +1,34 @@
+module PaymentsProcessed = {
+  open NewAnalyticsTypes
+  open NewAnalyticsHelper
+  open LineGraphTypes
+  @react.component
+  let make = (~entity: entity<lineGraphPayload, lineGraphOptions>) => {
+    let (paymentsProcessed, setpaymentsProcessed) = React.useState(_ => JSON.Encode.null)
+    let getPaymentsProcessed = async () => {
+      try {
+        setpaymentsProcessed(_ => JSON.Encode.null)
+      } catch {
+      | _ => ()
+      }
+    }
+    React.useEffect(() => {
+      getPaymentsProcessed()->ignore
+      None
+    }, [])
+    <div>
+      <h2 className="font-600 text-xl text-jp-gray-900 pb-5"> {entity.title->React.string} </h2>
+      <Card>
+        <div className="mr-3 my-10">
+          <LineGraph entity={entity} data={paymentsProcessed} />
+        </div>
+      </Card>
+    </div>
+  }
+}
 @react.component
 let make = () => {
   <div className="flex flex-col gap-5 mt-5">
-    <LineGraph entity={NewPaymentAnalyticsEntity.paymentsProcessedEntity} />
+    <PaymentsProcessed entity={OverViewAnalyticsEntity.paymentsProcessed} />
   </div>
 }
diff --git a/src/screens/NewAnalytics/OverViewAnalytics/OverViewAnalyticsEntity.res b/src/screens/NewAnalytics/OverViewAnalytics/OverViewAnalyticsEntity.res
index 8b1378917..cb556b726 100644
--- a/src/screens/NewAnalytics/OverViewAnalytics/OverViewAnalyticsEntity.res
+++ b/src/screens/NewAnalytics/OverViewAnalytics/OverViewAnalyticsEntity.res
@@ -1 +1,11 @@
-
+open NewAnalyticsTypes
+let paymentsProcessed: entity<LineGraphTypes.lineGraphPayload, LineGraphTypes.lineGraphOptions> = {
+  requestBodyConfig: {
+    delta: false,
+    metrics: [#payment_processed_amount],
+  },
+  title: "Payments Processed",
+  domain: #payments,
+  getObjects: OverViewAnalyticsUtils.paymentsProcessedMapper,
+  getChatOptions: LineGraphUtils.getLineGraphOptions,
+}
diff --git a/src/screens/NewAnalytics/OverViewAnalytics/OverViewAnalyticsUtils.res b/src/screens/NewAnalytics/OverViewAnalytics/OverViewAnalyticsUtils.res
index 8b1378917..b2efe3d25 100644
--- a/src/screens/NewAnalytics/OverViewAnalytics/OverViewAnalyticsUtils.res
+++ b/src/screens/NewAnalytics/OverViewAnalytics/OverViewAnalyticsUtils.res
@@ -1 +1,26 @@
-
+let paymentsProcessedMapper = (_json): LineGraphTypes.lineGraphPayload => {
+  open LineGraphTypes
+  let categories = [
+    "01 Aug",
+    "02 Aug",
+    "03 Aug",
+    "04 Aug",
+    "05 Aug",
+    "06 Aug",
+    "07 Aug",
+    "08 Aug",
+    "09 Aug",
+    "10 Aug",
+    "11 Aug",
+  ]
+  let data = {
+    showInLegend: false,
+    name: "Series 1",
+    data: [3000, 5000, 7000, 5360, 4500, 6800, 5400, 3000, 0, 0],
+    color: "#2f7ed8",
+  }
+  let title = {
+    text: "USD",
+  }
+  {categories, data, title}
+}
diff --git a/src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalytics.res b/src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalytics.res
index c712fb187..46db7ad3b 100644
--- a/src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalytics.res
+++ b/src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalytics.res
@@ -1,19 +1,15 @@
 // html code comes here
 
-module PaymentLifeCycle = {
+module PaymentsLifeCycle = {
   open NewAnalyticsTypes
   open NewAnalyticsHelper
   open SankeyGraphTypes
   @react.component
   let make = (~entity: entity<sankeyPayload, sankeyGraphOptions>) => {
-    let data = entity.getObjects(JSON.Encode.null)
-    let options = entity.getChatOptions(data)
-    let (lifeCycleOptions, setLifeCycleOptions) = React.useState(_ => options)
+    let (paymentsLifeCycle, setPaymentsLifeCycle) = React.useState(_ => JSON.Encode.null)
     let getPaymentLieCycleData = async () => {
       try {
-        let apiData = entity.getObjects(JSON.Encode.null)
-        let options = entity.getChatOptions(apiData)
-        setLifeCycleOptions(_ => options)
+        setPaymentsLifeCycle(_ => JSON.Encode.null)
       } catch {
       | _ => ()
       }
@@ -26,7 +22,7 @@ module PaymentLifeCycle = {
       <h2 className="font-600 text-xl text-jp-gray-900 pb-5"> {entity.title->React.string} </h2>
       <Card>
         <div className="mr-3 my-10">
-          <SankeyGraph options={lifeCycleOptions} />
+          <SankeyGraph entity={entity} data={paymentsLifeCycle} />
         </div>
       </Card>
     </div>
@@ -37,6 +33,6 @@ module PaymentLifeCycle = {
 let make = () => {
   open NewPaymentAnalyticsEntity
   <div className="flex flex-col gap-5 mt-5">
-    <PaymentLifeCycle entity={paymentLifeCycleEntity} />
+    <PaymentsLifeCycle entity={paymentsLifeCycleEntity} />
   </div>
 }
diff --git a/src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalyticsEntity.res b/src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalyticsEntity.res
index 54e373046..084d4cb8b 100644
--- a/src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalyticsEntity.res
+++ b/src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalyticsEntity.res
@@ -1,17 +1,7 @@
 open NewAnalyticsTypes
-let paymentsProcessedEntity: entity<LineGraphTypes.seriresType, RescriptCore.JSON.t> = {
-  requestBodyConfig: {
-    delta: false,
-    metrics: [#payment_processed_amount],
-  },
-  title: "Payments Processed",
-  domain: #payments,
-  getObjects: NewPaymentAnalyticsUtils.getPaymentsProcessed,
-  getChatOptions: NewPaymentAnalyticsUtils.getPaymentsProcessedOptions,
-}
 
 // Need to be changed later
-let paymentLifeCycleEntity: entity<
+let paymentsLifeCycleEntity: entity<
   SankeyGraphTypes.sankeyPayload,
   SankeyGraphTypes.sankeyGraphOptions,
 > = {
@@ -21,6 +11,6 @@ let paymentLifeCycleEntity: entity<
   },
   title: "Payments Lifecycle",
   domain: #payments,
-  getObjects: NewPaymentAnalyticsUtils.transformPaymentLifeCycle,
+  getObjects: NewPaymentAnalyticsUtils.paymentsLifeCycleMapper,
   getChatOptions: SankeyGraphUtils.getSankyGraphOptions,
 }
diff --git a/src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalyticsUtils.res b/src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalyticsUtils.res
index c5f5a05b0..3b446835b 100644
--- a/src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalyticsUtils.res
+++ b/src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalyticsUtils.res
@@ -1,78 +1,6 @@
 // helper functions
 
-let getPaymentsProcessed = _json => {
-  open LineGraphTypes
-  {
-    showInLegend: false,
-    name: "Series 1",
-    data: [3000, 5000, 7000, 5360, 4500, 6800, 5400, 3000, 0, 0],
-    color: "#2f7ed8",
-  }
-}
-
-let getPaymentsProcessedOptions = data =>
-  {
-    "chart": {
-      "type": "line",
-      "spacingLeft": 20,
-      "spacingRight": 20,
-    },
-    "title": {
-      "text": "",
-    },
-    "xAxis": {
-      "categories": [
-        "01 Aug",
-        "02 Aug",
-        "03 Aug",
-        "04 Aug",
-        "05 Aug",
-        "06 Aug",
-        "07 Aug",
-        "08 Aug",
-        "09 Aug",
-        "10 Aug",
-        "11 Aug",
-      ],
-      "crosshair": true,
-      "lineWidth": 1,
-      "tickWidth": 1,
-      "labels": {
-        "align": "center",
-        "style": {
-          "color": "#666",
-        },
-        "y": 35,
-      },
-      "gridLineWidth": 1,
-      "gridLineColor": "#e6e6e6",
-      "tickmarkPlacement": "on",
-      "endOnTick": false,
-      "startOnTick": false,
-    },
-    "yAxis": {
-      "title": {
-        "text": "USD",
-      },
-      "gridLineWidth": 1,
-      "gridLineColor": "#e6e6e6",
-      "gridLineDashStyle": "Dash",
-      "min": 0,
-    },
-    "plotOptions": {
-      "line": {
-        "marker": {
-          "enabled": false,
-        },
-      },
-    },
-    "series": [data],
-    "credits": {
-      "enabled": false,
-    },
-  }->Identity.genericObjectOrRecordToJson
-
-let transformPaymentLifeCycle = (_json): SankeyGraphTypes.sankeyPayload => {
+let paymentsLifeCycleMapper = (_json): SankeyGraphTypes.sankeyPayload => {
   open SankeyGraphTypes
   let processedData = [
     ("Payments Initiated", "Success", 8000, "#E4EFFF"),