diff --git a/.playground/index.html b/.playground/index.html
index 2403a54bfc..3f30690eb5 100644
--- a/.playground/index.html
+++ b/.playground/index.html
@@ -7,29 +7,19 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <style>
       html,
-      body {
+      body,
+      #root {
         background: blanchedalmond !important;
+        width: 100%;
+        height: 100%;
+        padding: 10px;
       }
 
       .chart {
-        background: white;
-        /*display: inline-block;
-        position: relative;
-        */
-        width: 500px;
-        height: 200px;
-        overflow: auto;
-      }
-
-      .testing {
-        background: aquamarine;
         position: relative;
-        width: 100%;
-        overflow: auto;
-      }
-
-      .page {
-        padding: 10px;
+        background: white;
+        width: 800px;
+        height: 500px;
       }
 
       label {
@@ -39,9 +29,7 @@
   </head>
 
   <body>
-    <div class="page">
-      <div id="root"></div>
-    </div>
+    <div id="root"></div>
     <script src="bundle.js" type="text/javascript"></script>
   </body>
 </html>
diff --git a/.playground/playground.tsx b/.playground/playground.tsx
index 6566002f1c..e612a12c5f 100644
--- a/.playground/playground.tsx
+++ b/.playground/playground.tsx
@@ -19,14 +19,12 @@
 
 import React from 'react';
 
-import { Example } from '../stories/sunburst/15_single_sunburst';
+import { Example } from '../stories/bar/1_basic';
 
-export class Playground extends React.Component {
-  render() {
-    return (
-      <div className="testing">
-        <div className="chart">{Example()}</div>
-      </div>
-    );
-  }
+export function Playground() {
+  return (
+    <div className="chart">
+      <Example />
+    </div>
+  );
 }
diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-discontinuous-data-points-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-discontinuous-data-points-visually-looks-correct-1-snap.png
new file mode 100644
index 0000000000..f95838cbd5
Binary files /dev/null and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-discontinuous-data-points-visually-looks-correct-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-non-stacked-linear-area-with-discontinuous-data-points-no-fit-function-1-snap.png b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-non-stacked-linear-area-with-discontinuous-data-points-no-fit-function-1-snap.png
new file mode 100644
index 0000000000..7f9d12fbd8
Binary files /dev/null and b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-non-stacked-linear-area-with-discontinuous-data-points-no-fit-function-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-non-stacked-linear-area-with-discontinuous-data-points-with-fit-1-snap.png b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-non-stacked-linear-area-with-discontinuous-data-points-with-fit-1-snap.png
new file mode 100644
index 0000000000..f873152656
Binary files /dev/null and b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-non-stacked-linear-area-with-discontinuous-data-points-with-fit-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-non-stacked-linear-line-with-discontinuous-data-points-no-fit-function-1-snap.png b/integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-non-stacked-linear-line-with-discontinuous-data-points-no-fit-function-1-snap.png
new file mode 100644
index 0000000000..c5e1144e58
Binary files /dev/null and b/integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-non-stacked-linear-line-with-discontinuous-data-points-no-fit-function-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-non-stacked-linear-line-with-discontinuous-data-points-with-fit-1-snap.png b/integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-non-stacked-linear-line-with-discontinuous-data-points-with-fit-1-snap.png
new file mode 100644
index 0000000000..f95838cbd5
Binary files /dev/null and b/integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-non-stacked-linear-line-with-discontinuous-data-points-with-fit-1-snap.png differ
diff --git a/integration/tests/area_stories.test.ts b/integration/tests/area_stories.test.ts
index 09780779f5..f81de8b5e9 100644
--- a/integration/tests/area_stories.test.ts
+++ b/integration/tests/area_stories.test.ts
@@ -50,4 +50,17 @@ describe('Area series stories', () => {
       });
     });
   });
+  describe('Non-Stacked Linear Area with discontinuous data points', () => {
+    it('with fit', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        'http://localhost:9001/?path=/story/line-chart--discontinuous-data-points&knob-enable fit function=false&knob-switch to area=true',
+      );
+    });
+
+    it('no fit function', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        'http://localhost:9001/?path=/story/line-chart--discontinuous-data-points&knob-enable fit function=true&knob-switch to area=true',
+      );
+    });
+  });
 });
diff --git a/integration/tests/line_stories.test.ts b/integration/tests/line_stories.test.ts
index 468c930e2f..b6059c20ea 100644
--- a/integration/tests/line_stories.test.ts
+++ b/integration/tests/line_stories.test.ts
@@ -56,4 +56,17 @@ describe('Line series stories', () => {
       );
     });
   });
+  describe('Non-Stacked Linear Line with discontinuous data points', () => {
+    it('with fit', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        'http://localhost:9001/?path=/story/line-chart--discontinuous-data-points&knob-enable fit function=false&knob-switch to area=',
+      );
+    });
+
+    it('no fit function', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        'http://localhost:9001/?path=/story/line-chart--discontinuous-data-points&knob-enable fit function=true&knob-switch to area=',
+      );
+    });
+  });
 });
diff --git a/src/chart_types/xy_chart/state/utils/utils.ts b/src/chart_types/xy_chart/state/utils/utils.ts
index acedf10e66..40537fb4da 100644
--- a/src/chart_types/xy_chart/state/utils/utils.ts
+++ b/src/chart_types/xy_chart/state/utils/utils.ts
@@ -30,7 +30,7 @@ import { GroupId, SpecId } from '../../../../utils/ids';
 import { ColorConfig, Theme } from '../../../../utils/themes/theme';
 import { XDomain, YDomain } from '../../domains/types';
 import { mergeXDomain } from '../../domains/x_domain';
-import { mergeYDomain } from '../../domains/y_domain';
+import { mergeYDomain, splitSpecsByGroupId } from '../../domains/y_domain';
 import { renderArea, renderBars, renderLine, renderBubble, isDatumFilled } from '../../rendering/rendering';
 import { defaultTickFormatter } from '../../utils/axis_utils';
 import { fillSeries } from '../../utils/fill_series';
@@ -131,18 +131,24 @@ export function getCustomSeriesColors(
   return updatedCustomSeriesColors;
 }
 
-function getLastValues(formattedDataSeries: {
-  stacked: FormattedDataSeries[];
-  nonStacked: FormattedDataSeries[];
-}): Map<SeriesKey, LastValues> {
+function getLastValues(
+  formattedDataSeries: {
+    stacked: FormattedDataSeries[];
+    nonStacked: FormattedDataSeries[];
+  },
+  xDomain: XDomain,
+): Map<SeriesKey, LastValues> {
   const lastValues = new Map<SeriesKey, LastValues>();
-
+  if (xDomain.scaleType === ScaleType.Ordinal) {
+    return lastValues;
+  }
   // we need to get the latest
   formattedDataSeries.stacked.forEach(({ dataSeries, stackMode }) => {
     dataSeries.forEach((series) => {
       if (series.data.length === 0) {
         return;
       }
+
       const last = series.data[series.data.length - 1];
       if (!last) {
         return;
@@ -151,6 +157,13 @@ function getLastValues(formattedDataSeries: {
         return;
       }
 
+      if (last.x !== xDomain.domain[xDomain.domain.length - 1]) {
+        // we have a dataset that is not filled with all x values
+        // and the last value of the series is not the last value for every series
+        // let's skip it
+        return;
+      }
+
       const { y0, y1, initialY0, initialY1 } = last;
       const seriesKey = getSeriesKey(series as XYChartSeriesIdentifier);
 
@@ -178,6 +191,13 @@ function getLastValues(formattedDataSeries: {
         return;
       }
 
+      if (last.x !== xDomain.domain[xDomain.domain.length - 1]) {
+        // we have a dataset that is not filled with all x values
+        // and the last value of the series is not the last value for every series
+        // let's skip it
+        return;
+      }
+
       const { initialY1, initialY0 } = last;
       const seriesKey = getSeriesKey(series as XYChartSeriesIdentifier);
 
@@ -194,6 +214,7 @@ function getLastValues(formattedDataSeries: {
  * @param customXDomain if specified in <Settings />, the custom X domain
  * @param deselectedDataSeries is optional; if not supplied,
  * @param customXDomain is optional; if not supplied,
+ * @param orderOrdinalBinsBy
  * @param enableVislibSeriesSort is optional; if not specified in <Settings />,
  * then all series will be factored into computations. Otherwise, selectedDataSeries
  * is used to restrict the computation for just the selected series
@@ -215,18 +236,25 @@ export function computeSeriesDomains(
     enableVislibSeriesSort,
   );
   // compute the x domain merging any custom domain
-  const specsArray = [...seriesSpecs.values()];
-  const xDomain = mergeXDomain(specsArray, xValues, customXDomain, fallbackScale);
+  const xDomain = mergeXDomain(seriesSpecs, xValues, customXDomain, fallbackScale);
+
+  const specsByGroupIds = splitSpecsByGroupId(seriesSpecs);
 
   // fill series with missing x values
-  const filledDataSeriesBySpecId = fillSeries(dataSeriesBySpecId, xValues);
+  const filledDataSeriesBySpecId = fillSeries(
+    dataSeriesBySpecId,
+    xValues,
+    seriesSpecs,
+    xDomain.scaleType,
+    specsByGroupIds,
+  );
 
   const formattedDataSeries = getFormattedDataseries(
-    specsArray,
     filledDataSeriesBySpecId,
     xValues,
     xDomain.scaleType,
     seriesSpecs,
+    specsByGroupIds,
   );
 
   // let's compute the yDomain after computing all stacked values
@@ -234,7 +262,7 @@ export function computeSeriesDomains(
 
   // we need to get the last values from the formatted dataseries
   // because we change the format if we are on percentage mode
-  const lastValues = xDomain.scaleType !== ScaleType.Ordinal ? getLastValues(formattedDataSeries) : new Map();
+  const lastValues = getLastValues(formattedDataSeries, xDomain);
   const updatedSeriesCollection = new Map<SeriesKey, SeriesCollectionValue>();
   seriesCollection.forEach((value, key) => {
     const lastValue = lastValues.get(key);
diff --git a/src/chart_types/xy_chart/utils/fill_series.ts b/src/chart_types/xy_chart/utils/fill_series.ts
index e21fabc9e0..dd8f318c4d 100644
--- a/src/chart_types/xy_chart/utils/fill_series.ts
+++ b/src/chart_types/xy_chart/utils/fill_series.ts
@@ -16,24 +16,47 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { SpecId } from '../../../utils/ids';
+import { ScaleType } from '../../../scales/constants';
+import { SpecId, GroupId } from '../../../utils/ids';
+import { YBasicSeriesSpec } from '../domains/y_domain';
+import { getSpecsById } from '../state/utils/spec';
 import { DataSeries } from './series';
+import { SeriesSpecs, StackMode, BasicSeriesSpec, isLineSeriesSpec, isAreaSeriesSpec } from './specs';
 
 /**
  * Fill missing x values in all data series
- * @param series
- * @param xValues
  * @internal
  */
 export function fillSeries(
   series: Map<SpecId, DataSeries[]>,
   xValues: Set<string | number>,
+  seriesSpecs: SeriesSpecs,
+  groupScaleType: ScaleType,
+  specsByGroupIds: Map<
+    GroupId,
+    {
+      stackMode: StackMode | undefined;
+      stacked: YBasicSeriesSpec[];
+      nonStacked: YBasicSeriesSpec[];
+    }
+  >,
 ): Map<SpecId, DataSeries[]> {
   const sortedXValues = [...xValues.values()];
   const filledSeries: Map<SpecId, DataSeries[]> = new Map();
   series.forEach((dataSeries, key) => {
+    const spec = getSpecsById(seriesSpecs, key);
+    if (!spec) {
+      return;
+    }
+    const group = specsByGroupIds.get(spec.groupId);
+    if (!group) {
+      return;
+    }
+    const isStacked = Boolean(group.stacked.find(({ id }) => id === key));
+    const noFillRequired = isXFillNotRequired(spec, groupScaleType, isStacked);
+
     const filledDataSeries = dataSeries.map(({ data, ...rest }) => {
-      if (data.length === xValues.size) {
+      if (data.length === xValues.size || noFillRequired) {
         return {
           ...rest,
           data,
@@ -74,3 +97,9 @@ export function fillSeries(
   });
   return filledSeries;
 }
+
+function isXFillNotRequired(spec: BasicSeriesSpec, groupScaleType: ScaleType, isStacked: boolean) {
+  const onlyNoFitAreaLine = (isAreaSeriesSpec(spec) || isLineSeriesSpec(spec)) && !spec.fit;
+  const onlyContinuous = groupScaleType === ScaleType.Linear || groupScaleType === ScaleType.Time;
+  return onlyNoFitAreaLine && onlyContinuous && !isStacked;
+}
diff --git a/src/chart_types/xy_chart/utils/nonstacked_series_utils.test.ts b/src/chart_types/xy_chart/utils/nonstacked_series_utils.test.ts
index b7d92d22ed..471a99d0fd 100644
--- a/src/chart_types/xy_chart/utils/nonstacked_series_utils.test.ts
+++ b/src/chart_types/xy_chart/utils/nonstacked_series_utils.test.ts
@@ -226,8 +226,10 @@ describe('Non-Stacked Series Utils', () => {
       } = computeSeriesDomainsSelector(store.getState());
 
       expect(dataSeries.length).toBe(2);
-      expect(dataSeries[0].data.length).toBe(4);
-      expect(dataSeries[1].data.length).toBe(4);
+      // this because linear non stacked area/lines doesn't fill up the dataset
+      // with missing x data points
+      expect(dataSeries[0].data.length).toBe(3);
+      expect(dataSeries[1].data.length).toBe(2);
 
       expect(dataSeries[0].data[0]).toMatchObject({
         initialY0: null,
@@ -245,7 +247,7 @@ describe('Non-Stacked Series Utils', () => {
         y1: 2,
         mark: null,
       });
-      expect(dataSeries[0].data[3]).toMatchObject({
+      expect(dataSeries[0].data[2]).toMatchObject({
         initialY0: null,
         initialY1: 4,
         x: 4,
@@ -261,7 +263,7 @@ describe('Non-Stacked Series Utils', () => {
         y1: 21,
         mark: null,
       });
-      expect(dataSeries[1].data[2]).toMatchObject({
+      expect(dataSeries[1].data[1]).toMatchObject({
         initialY0: null,
         initialY1: 23,
         x: 3,
diff --git a/src/chart_types/xy_chart/utils/series.test.ts b/src/chart_types/xy_chart/utils/series.test.ts
index a4051f4358..1404d6e040 100644
--- a/src/chart_types/xy_chart/utils/series.test.ts
+++ b/src/chart_types/xy_chart/utils/series.test.ts
@@ -28,6 +28,7 @@ import { AccessorFn } from '../../../utils/accessor';
 import { Position } from '../../../utils/commons';
 import * as TestDataset from '../../../utils/data_samples/test_dataset';
 import { ColorConfig } from '../../../utils/themes/theme';
+import { splitSpecsByGroupId } from '../domains/y_domain';
 import { computeSeriesDomainsSelector } from '../state/selectors/compute_series_domains';
 import {
   SeriesCollectionValue,
@@ -485,12 +486,14 @@ describe('Series', () => {
     };
     const xValues = new Set([0, 1, 2, 3]);
     const splittedDataSeries = getDataSeriesBySpecId([spec1, spec2]);
+    const specsByGroupIds = splitSpecsByGroupId([spec1, spec2]);
+
     const stackedDataSeries = getFormattedDataseries(
-      [spec1, spec2],
       splittedDataSeries.dataSeriesBySpecId,
       xValues,
       ScaleType.Linear,
-      [],
+      [spec1, spec2],
+      specsByGroupIds,
     );
     expect(stackedDataSeries.stacked).toMatchSnapshot();
   });
diff --git a/src/chart_types/xy_chart/utils/series.ts b/src/chart_types/xy_chart/utils/series.ts
index 5f01aebd5d..ed5cfe3eda 100644
--- a/src/chart_types/xy_chart/utils/series.ts
+++ b/src/chart_types/xy_chart/utils/series.ts
@@ -27,7 +27,7 @@ import { Datum, Color } from '../../../utils/commons';
 import { GroupId, SpecId } from '../../../utils/ids';
 import { Logger } from '../../../utils/logger';
 import { ColorConfig } from '../../../utils/themes/theme';
-import { splitSpecsByGroupId, YBasicSeriesSpec } from '../domains/y_domain';
+import { YBasicSeriesSpec } from '../domains/y_domain';
 import { LastValues } from '../state/utils/types';
 import { applyFitFunctionToDataSeries } from './fit_function_utils';
 import { BasicSeriesSpec, SeriesTypes, SeriesSpecs, SeriesNameConfigOptions, StackMode } from './specs';
@@ -347,18 +347,22 @@ const getSortedDataSeries = (
 
 /** @internal */
 export function getFormattedDataseries(
-  specs: YBasicSeriesSpec[],
   availableDataSeries: Map<SpecId, DataSeries[]>,
   xValues: Set<string | number>,
   xScaleType: ScaleType,
   seriesSpecs: SeriesSpecs,
+  specsByGroupIdsEntries: Map<
+    GroupId,
+    {
+      stackMode: StackMode | undefined;
+      stacked: YBasicSeriesSpec[];
+      nonStacked: YBasicSeriesSpec[];
+    }
+  >,
 ): {
   stacked: FormattedDataSeries[];
   nonStacked: FormattedDataSeries[];
 } {
-  const specsByGroupIds = splitSpecsByGroupId(specs);
-  const specsByGroupIdsEntries = [...specsByGroupIds.entries()];
-
   const stackedFormattedDataSeries: {
     groupId: GroupId;
     dataSeries: DataSeries[];
@@ -371,7 +375,7 @@ export function getFormattedDataseries(
     counts: DataSeriesCounts;
   }[] = [];
 
-  specsByGroupIdsEntries.forEach(([groupId, groupSpecs]) => {
+  [...specsByGroupIdsEntries.entries()].forEach(([groupId, groupSpecs]) => {
     const { stackMode } = groupSpecs;
     // format stacked data series
     const stackedDataSeries = getDataSeriesBySpecGroup(groupSpecs.stacked, availableDataSeries);
diff --git a/stories/line/11_discontinuous_data_points.tsx b/stories/line/11_discontinuous_data_points.tsx
new file mode 100644
index 0000000000..58ebab2020
--- /dev/null
+++ b/stories/line/11_discontinuous_data_points.tsx
@@ -0,0 +1,74 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { boolean } from '@storybook/addon-knobs';
+import React from 'react';
+
+import { Axis, Chart, CurveType, LineSeries, Position, ScaleType, Settings, Fit, AreaSeries } from '../../src';
+
+export const Example = () => {
+  const fitEnabled = boolean('enable fit function', false);
+  const isArea = boolean('switch to area', false);
+  const LineOrAreaSeries = isArea ? AreaSeries : LineSeries;
+  return (
+    <Chart className="story-chart">
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
+      <Axis id="x" position={Position.Bottom} />
+      <Axis id="y" position={Position.Left} />
+
+      <LineOrAreaSeries
+        id="series 1"
+        xScaleType={ScaleType.Linear}
+        yScaleType={ScaleType.Linear}
+        xAccessor={0}
+        yAccessors={[1]}
+        fit={fitEnabled ? Fit.Linear : undefined}
+        data={[
+          [0, 10],
+          [1, 12],
+          [2, 14],
+          [3, 15],
+          [4, 5],
+          [5, 6],
+          [6, 9],
+          [8, 11],
+        ]}
+        curve={CurveType.CURVE_MONOTONE_X}
+      />
+
+      <LineOrAreaSeries
+        id="series 2"
+        xScaleType={ScaleType.Linear}
+        yScaleType={ScaleType.Linear}
+        xAccessor={0}
+        yAccessors={[1]}
+        fit={fitEnabled ? Fit.Linear : undefined}
+        data={[
+          [0, 3],
+          [1, 3.5],
+          [3, 4],
+          [4, 8],
+          [6, 3],
+          [7, 2],
+        ]}
+        curve={CurveType.CURVE_MONOTONE_X}
+      />
+    </Chart>
+  );
+};
diff --git a/stories/line/line.stories.tsx b/stories/line/line.stories.tsx
index b1d64cab57..87fd629976 100644
--- a/stories/line/line.stories.tsx
+++ b/stories/line/line.stories.tsx
@@ -35,4 +35,5 @@ export { Example as curvedWithAxisAndLegend } from './6_curved';
 export { Example as multipleWithAxisAndLegend } from './7_multiple';
 export { Example as stackedWithAxisAndLegend } from './8_stacked';
 export { Example as multiSeriesWithLogValues } from './9_multi_series';
+export { Example as discontinuousDataPoints } from './11_discontinuous_data_points';
 export { Example as testPathOrdering } from './10_test_path_ordering';
