make an approximation as a straight line.

ui/shared/chart/ChartArea.tsx

@@ -38,6 +38,7 @@ const ChartArea = ({ id, xScale, yScale, color, data, disableAnimation, ...props
 
   const d = React.useMemo(() => {
     const area = d3.area<TimeChartItem>()
+      .defined(({ isApproximate }) => !isApproximate)
       .x(({ date }) => xScale(date))
       .y1(({ value }) => yScale(value))
       .y0(() => yScale(yScale.domain()[0]))

ui/shared/chart/ChartLine.tsx

@@ -5,6 +5,7 @@ import type { TimeChartItem } from 'ui/shared/chart/types';
 
 import type { AnimationType } from './utils/animations';
 import { ANIMATIONS } from './utils/animations';
+import { getIncompleteDataLineSource } from './utils/formatters';
 
 interface Props extends React.SVGProps<SVGPathElement> {
   xScale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
@@ -49,7 +50,7 @@ const ChartLine = ({ xScale, yScale, data, animation, ...props }: Props) => {
     <>
       <path
         ref={ incompleteDataPathRef }
-        d={ line(data) || undefined }
+        d={ line(getIncompleteDataLineSource(data)) || undefined }
         strokeWidth={ 1 }
         strokeLinecap="round"
         fill="none"

ui/shared/chart/utils/formatters.ts

@@ -0,0 +1,19 @@
+import type { TimeChartItem } from '../types';
+
+export const getIncompleteDataLineSource = (data: Array<TimeChartItem>): Array<TimeChartItem> => {
+  const result: Array<TimeChartItem> = [];
+
+  for (let index = 0; index < data.length; index++) {
+    const current = data[index];
+    if (current.isApproximate) {
+      const prev = data[index - 1];
+      const next = data[index + 1];
+
+      prev && !prev.isApproximate && result.push(prev);
+      result.push(current);
+      next && !next.isApproximate && result.push(next);
+    }
+  }
+
+  return result;
+};