fix(xy): occlude points outside of y domain

integration/tests/test_cases_stories.test.ts

@@ -34,3 +34,51 @@ describe('annotation marker rotation', () => {
     );
   }, 'should render marker with annotations with %s degree rotations');
 });
+
+describe('Occlusion of Points outside of chart domain', () => {
+  it('should render line chart with points outside of domain correctly', async () => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/test-cases--test-points-outside-of-domain&knob-series%20type=line',
+    );
+  });
+  it('should render area chart with points outside of domain correclty', async () => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/test-cases--test-points-outside-of-domain&knob-series%20type=area&knob-show%20y0Accessor=false',
+    );
+  });
+  it('should render area chart with points outside of the domain with y0 accessor correctly', async () => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/test-cases--test-points-outside-of-domain&knob-series%20type=areaknob-show%20y0Accessor=true',
+    );
+  });
+  it('should not display tooltip over point outside of domain', async () => {
+    await common.expectChartWithMouseAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/test-cases--test-points-outside-of-domain&knob-series%20type=line',
+      { left: 150, top: 180 },
+      {
+        screenshotSelector: '#story-root',
+        delay: 1000,
+      },
+    );
+  });
+  it('should not display tooltip over point outside of domain slightly more left', async () => {
+    await common.expectChartWithMouseAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/test-cases--test-points-outside-of-domain&knob-series%20type=line',
+      { left: 200, top: 180 },
+      {
+        screenshotSelector: '#story-root',
+        delay: 1000,
+      },
+    );
+  });
+  it('should not display tooltip over point outside of domain even more left', async () => {
+    await common.expectChartWithMouseAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/test-cases--test-points-outside-of-domain&knob-series%20type=line',
+      { left: 250, top: 180 },
+      {
+        screenshotSelector: '#story-root',
+        delay: 1000,
+      },
+    );
+  });
+});

packages/charts/src/chart_types/xy_chart/rendering/points.ts

@@ -109,9 +109,13 @@ export function renderPoints(
         panel,
         orphan,
       };
-      indexedGeometryMap.set(pointGeometry, geometryType);
+      const isInYDomain = yScale.isValueInDomain(valueAccessor(datum));
+      // exclude rendering points outside of the yDomain but add null values
+      if (isInYDomain || valueAccessor(datum) === null) {
+        indexedGeometryMap.set(pointGeometry, geometryType);
+      }
       // use the geometry only if the yDatum in contained in the current yScale domain
-      if (y !== null && yDefined(datum, valueAccessor) && !isDatumFilled(datum)) {
+      if (y !== null && yDefined(datum, valueAccessor) && isInYDomain && !isDatumFilled(datum)) {
         points.push(pointGeometry);
       }
     });

storybook/stories/test_cases/7_test_points_outside_of_domain.story.tsx

@@ -0,0 +1,78 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { boolean, select } from '@storybook/addon-knobs';
+import React from 'react';
+
+import { AreaSeries, LineSeries, Axis, Chart, Position, ScaleType, Settings } from '@elastic/charts';
+import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
+
+import { useBaseTheme } from '../../use_base_theme';
+
+export const Example = () => {
+  const typeOfSeries = select('series type', ['line', 'area'], 'area');
+  const showY0Accessor = typeOfSeries === 'area' ? boolean('show y0Accessor', false) : null;
+
+  const data = [
+    [1, 1],
+    [2, -3],
+    [3, 3],
+    [4, 4],
+    [5, 5],
+    [6, 4],
+    [7, -3],
+    [8, 2],
+    [9, 1],
+  ];
+  return (
+    <Chart>
+      <Settings baseTheme={useBaseTheme()} />
+      <Axis id="bottom" title="index" position={Position.Bottom} />
+      <Axis
+        id="left"
+        title={KIBANA_METRICS.metrics.kibana_os_load[0].metric.title}
+        position={Position.Left}
+        tickFormat={(d) => Number(d).toFixed(2)}
+        domain={{
+          min: -2,
+          max: NaN,
+          minInterval: 1,
+        }}
+      />
+      {typeOfSeries === 'line' ? (
+        <LineSeries
+          id="lines"
+          xScaleType={ScaleType.Linear}
+          yScaleType={ScaleType.Linear}
+          xAccessor={0}
+          yAccessors={[1]}
+          data={data}
+        />
+      ) : typeOfSeries === 'area' && !showY0Accessor ? (
+        <AreaSeries
+          id="areas"
+          xScaleType={ScaleType.Linear}
+          yScaleType={ScaleType.Linear}
+          xAccessor={0}
+          yAccessors={[1]}
+          data={data}
+        />
+      ) : (
+        <AreaSeries
+          id="areas"
+          xScaleType={ScaleType.Linear}
+          yScaleType={ScaleType.Linear}
+          xAccessor={0}
+          yAccessors={[1]}
+          y0Accessors={[([, y]) => y - 1]}
+          data={data}
+        />
+      )}
+    </Chart>
+  );
+};

storybook/stories/test_cases/test_cases.stories.tsx

@@ -16,3 +16,4 @@ export { Example as noAxesAnnotationBugFix } from './3_no_axes_annotation.story'
 export { Example as filterZerosInLogFitDomain } from './4_filter_zero_values_log.story';
 export { Example as legendScrollBarSizing } from './5_legend_scroll_bar_sizing.story';
 export { Example as accessibilityCustomizations } from './6_a11y_custom_description.story';
+export { Example as testPointsOutsideOfDomain } from './7_test_points_outside_of_domain.story';