diff --git a/packages/react-components/src/Chart/Line.tsx b/packages/react-components/src/Chart/Line.tsx
index c7df3169b1..aae9996338 100644
--- a/packages/react-components/src/Chart/Line.tsx
+++ b/packages/react-components/src/Chart/Line.tsx
@@ -13,11 +13,6 @@ import { isBn, objectSpread } from '@polkadot/util';
 import ErrorBoundary from '../ErrorBoundary';
 import { alphaColor } from './utils';
 
-interface State {
-  chartData: ChartData;
-  chartOptions: ChartOptions;
-}
-
 interface Dataset {
   data: number[];
   fill: boolean;
@@ -86,8 +81,20 @@ const BASE_OPTS: ChartOptions = {
   }
 };
 
-function calculateOptions (colors: (string | undefined)[] = [], legends: string[], labels: string[], values: (number | BN)[][], options: ChartOptions = {}): State {
-  const chartData = values.reduce((chartData, values, index): Config => {
+function getOptions (options: ChartOptions = {}): ChartOptions {
+  return objectSpread({}, BASE_OPTS, options, {
+    // Re-spread plugins for deep(er) copy
+    plugins: objectSpread({}, BASE_OPTS.plugins, options.plugins, {
+      // Same applied to plugins, we may want specific values
+      annotation: objectSpread({}, BASE_OPTS.plugins?.annotation, options.plugins?.annotation),
+      crosshair: objectSpread({}, BASE_OPTS.plugins?.crosshair, options.plugins?.crosshair),
+      tooltip: objectSpread({}, BASE_OPTS.plugins?.tooltip, options.plugins?.tooltip)
+    })
+  });
+}
+
+function getData (colors: (string | undefined)[] = [], legends: string[], labels: string[], values: (number | BN)[][]): ChartData {
+  return values.reduce((chartData, values, index): Config => {
     const color = colors[index] || alphaColor(COLORS[index]);
     const data = values.map((value): number => isBn(value) ? value.toNumber() : value);
 
@@ -104,25 +111,17 @@ function calculateOptions (colors: (string | undefined)[] = [], legends: string[
 
     return chartData;
   }, { datasets: [] as Dataset[], labels });
-
-  return {
-    chartData,
-    chartOptions: objectSpread({}, BASE_OPTS, options, {
-      // Re-spread plugins for deep(er) copy
-      plugins: objectSpread({}, BASE_OPTS.plugins, options.plugins, {
-        // Same applied to plugins, we may want specific values
-        annotation: objectSpread({}, BASE_OPTS.plugins?.annotation, options.plugins?.annotation),
-        crosshair: objectSpread({}, BASE_OPTS.plugins?.crosshair, options.plugins?.crosshair),
-        tooltip: objectSpread({}, BASE_OPTS.plugins?.tooltip, options.plugins?.tooltip)
-      })
-    })
-  };
 }
 
 function LineChart ({ className, colors, labels, legends, options, values }: LineProps): React.ReactElement<LineProps> | null {
-  const { chartData, chartOptions } = useMemo(
-    () => calculateOptions(colors, legends, labels, values, options),
-    [colors, labels, legends, options, values]
+  const chartOptions = useMemo(
+    () => getOptions(options),
+    [options]
+  );
+
+  const chartData = useMemo(
+    () => getData(colors, legends, labels, values),
+    [colors, labels, legends, values]
   );
 
   return (