offset fix

ui/charts/EthereumChart.tsx

@@ -19,12 +19,15 @@ import useChartSize from 'ui/shared/chart/useChartSize';
 import useTimeChartController from 'ui/shared/chart/useTimeChartController';
 
 const CHART_MARGIN = { bottom: 20, left: 65, right: 30, top: 10 };
+const CHART_OFFSET = {
+  y: 26, // legend height
+};
 
 const EthereumChart = () => {
   const ref = React.useRef<SVGSVGElement>(null);
   const overlayRef = React.useRef<SVGRectElement>(null);
 
-  const { width, height, innerWidth, innerHeight } = useChartSize(ref.current, CHART_MARGIN);
+  const { width, height, innerWidth, innerHeight } = useChartSize(ref.current, CHART_MARGIN, CHART_OFFSET);
   const [ range, setRange ] = React.useState<[number, number]>([ 0, Infinity ]);
 
   const data: TimeChartData = [

ui/pages/Graph.tsx

@@ -14,7 +14,7 @@ const Graph = () => {
       <Box w="100%" h="400px">
         <EthereumChart/>
       </Box>
-      <Heading as="h2" size="sm" fontWeight="500" mb={ 3 } mt="100px">Ethereum Daily Transactions For Last Month</Heading>
+      <Heading as="h2" size="sm" fontWeight="500" mb={ 3 } mt="80px">Ethereum Daily Transactions For Last Month</Heading>
       <Box w="240px" h="150px">
         <SplineChartExample/>
       </Box>

ui/shared/chart/types.tsx

@@ -10,6 +10,11 @@ export interface ChartMargin {
   left?: number;
 }
 
+export interface ChartOffset {
+  x?: number;
+  y?: number;
+}
+
 export interface TimeChartDataItem {
   items: Array<TimeChartItem>;
   name: string;

ui/shared/chart/useChartSize.tsx

 import _debounce from 'lodash/debounce';
 import React from 'react';
 
-import type { ChartMargin } from 'ui/shared/chart/types';
+import type { ChartMargin, ChartOffset } from 'ui/shared/chart/types';
 
-export default function useChartSize(svgEl: SVGSVGElement | null, margin?: ChartMargin) {
+export default function useChartSize(svgEl: SVGSVGElement | null, margin?: ChartMargin, offsets?: ChartOffset) {
   const [ rect, setRect ] = React.useState<{ width: number; height: number}>({ width: 0, height: 0 });
 
   const calculateRect = React.useCallback(() => {
@@ -34,10 +34,10 @@ export default function useChartSize(svgEl: SVGSVGElement | null, margin?: Chart
 
   return React.useMemo(() => {
     return {
-      width: rect.width,
-      height: rect.height,
-      innerWidth: Math.max(rect.width - (margin?.left || 0) - (margin?.right || 0), 0),
-      innerHeight: Math.max(rect.height - (margin?.bottom || 0) - (margin?.top || 0), 0),
+      width: Math.max(rect.width - (offsets?.x || 0), 0),
+      height: Math.max(rect.height - (offsets?.y || 0), 0),
+      innerWidth: Math.max(rect.width - (offsets?.x || 0) - (margin?.left || 0) - (margin?.right || 0), 0),
+      innerHeight: Math.max(rect.height - (offsets?.y || 0) - (margin?.bottom || 0) - (margin?.top || 0), 0),
     };
-  }, [ margin?.bottom, margin?.left, margin?.right, margin?.top, rect ]);
+  }, [ margin?.bottom, margin?.left, margin?.right, margin?.top, offsets?.x, offsets?.y, rect.height, rect.width ]);
 }