From dcd70777c2b6b8530b4518ebbac066e9f097594e Mon Sep 17 00:00:00 2001
From: Marco Vettorello <vettorello.marco@gmail.com>
Date: Tue, 29 Sep 2020 13:00:58 +0200
Subject: [PATCH] feat: expose datum as part of GeometryValue (#822)

---
 api/charts.api.md                             |  1 +
 .../rendering/rendering.areas.test.ts         | 18 +++++++++++++++++
 .../rendering/rendering.bands.test.ts         | 14 +++++++++++++
 .../xy_chart/rendering/rendering.bars.test.ts | 18 +++++++++++++++++
 .../rendering/rendering.bubble.test.ts        | 20 +++++++++++++++++++
 .../rendering/rendering.lines.test.ts         | 20 +++++++++++++++++++
 .../xy_chart/rendering/rendering.test.ts      |  2 ++
 .../xy_chart/rendering/rendering.ts           |  2 ++
 .../state/chart_state.interactions.test.ts    |  6 ++++++
 .../xy_chart/state/chart_state.test.ts        |  3 +++
 .../xy_chart/state/utils/utils.test.ts        |  4 ++--
 .../xy_chart/tooltip/tooltip.test.ts          |  3 +++
 .../xy_chart/utils/interactions.test.ts       |  6 ++++++
 src/mocks/geometries.ts                       |  2 ++
 src/utils/geometry.ts                         |  4 ++++
 stories/interactions/1_bar_clicks.tsx         | 14 +++++++------
 16 files changed, 129 insertions(+), 8 deletions(-)

diff --git a/api/charts.api.md b/api/charts.api.md
index 262ae2e9d7..7e5eb22536 100644
--- a/api/charts.api.md
+++ b/api/charts.api.md
@@ -645,6 +645,7 @@ export interface GeometryValue {
     //
     // (undocumented)
     accessor: BandedAccessorType;
+    datum: any;
     // (undocumented)
     mark: number | null;
     // (undocumented)
diff --git a/src/chart_types/xy_chart/rendering/rendering.areas.test.ts b/src/chart_types/xy_chart/rendering/rendering.areas.test.ts
index e423f86da5..d7e74ce6ec 100644
--- a/src/chart_types/xy_chart/rendering/rendering.areas.test.ts
+++ b/src/chart_types/xy_chart/rendering/rendering.areas.test.ts
@@ -175,6 +175,7 @@ describe('Rendering points - areas', () => {
           x: 0,
           y: 10,
           mark: null,
+          datum: [0, 10],
         },
         transform: {
           x: 25,
@@ -199,6 +200,7 @@ describe('Rendering points - areas', () => {
           x: 1,
           y: 5,
           mark: null,
+          datum: [1, 5],
         },
         transform: {
           x: 25,
@@ -329,6 +331,7 @@ describe('Rendering points - areas', () => {
           x: 0,
           y: 10,
           mark: null,
+          datum: [0, 10],
         },
         transform: {
           x: 25,
@@ -353,6 +356,7 @@ describe('Rendering points - areas', () => {
           x: 1,
           y: 5,
           mark: null,
+          datum: [1, 5],
         },
         transform: {
           x: 25,
@@ -385,6 +389,7 @@ describe('Rendering points - areas', () => {
           x: 0,
           y: 20,
           mark: null,
+          datum: [0, 20],
         },
         transform: {
           x: 25,
@@ -409,6 +414,7 @@ describe('Rendering points - areas', () => {
           x: 1,
           y: 10,
           mark: null,
+          datum: [1, 10],
         },
         transform: {
           x: 25,
@@ -495,6 +501,7 @@ describe('Rendering points - areas', () => {
           x: 0,
           y: 10,
           mark: null,
+          datum: [0, 10],
         },
         transform: {
           x: 0,
@@ -519,6 +526,7 @@ describe('Rendering points - areas', () => {
           x: 1,
           y: 5,
           mark: null,
+          datum: [1, 5],
         },
         transform: {
           x: 0,
@@ -648,6 +656,7 @@ describe('Rendering points - areas', () => {
           x: 0,
           y: 10,
           mark: null,
+          datum: [0, 10],
         },
         transform: {
           x: 0,
@@ -672,6 +681,7 @@ describe('Rendering points - areas', () => {
           x: 1,
           y: 5,
           mark: null,
+          datum: [1, 5],
         },
         transform: {
           x: 0,
@@ -704,6 +714,7 @@ describe('Rendering points - areas', () => {
           x: 0,
           y: 20,
           mark: null,
+          datum: [0, 20],
         },
         transform: {
           x: 0,
@@ -728,6 +739,7 @@ describe('Rendering points - areas', () => {
           x: 1,
           y: 10,
           mark: null,
+          datum: [1, 10],
         },
         transform: {
           x: 0,
@@ -814,6 +826,7 @@ describe('Rendering points - areas', () => {
           x: 1546300800000,
           y: 10,
           mark: null,
+          datum: [1546300800000, 10],
         },
         transform: {
           x: 0,
@@ -838,6 +851,7 @@ describe('Rendering points - areas', () => {
           x: 1546387200000,
           y: 5,
           mark: null,
+          datum: [1546387200000, 5],
         },
         transform: {
           x: 0,
@@ -952,6 +966,7 @@ describe('Rendering points - areas', () => {
           x: 1546300800000,
           y: 10,
           mark: null,
+          datum: [1546300800000, 10],
         },
         transform: {
           x: 0,
@@ -976,6 +991,7 @@ describe('Rendering points - areas', () => {
           x: 1546387200000,
           y: 5,
           mark: null,
+          datum: [1546387200000, 5],
         },
         transform: {
           x: 0,
@@ -1008,6 +1024,7 @@ describe('Rendering points - areas', () => {
           x: 1546300800000,
           y: 20,
           mark: null,
+          datum: [1546300800000, 20],
         },
         transform: {
           x: 0,
@@ -1032,6 +1049,7 @@ describe('Rendering points - areas', () => {
           x: 1546387200000,
           y: 10,
           mark: null,
+          datum: [1546387200000, 10],
         },
         transform: {
           x: 0,
diff --git a/src/chart_types/xy_chart/rendering/rendering.bands.test.ts b/src/chart_types/xy_chart/rendering/rendering.bands.test.ts
index c3a04781e6..0134440e1a 100644
--- a/src/chart_types/xy_chart/rendering/rendering.bands.test.ts
+++ b/src/chart_types/xy_chart/rendering/rendering.bands.test.ts
@@ -175,6 +175,7 @@ describe('Rendering bands - areas', () => {
           x: 0,
           y: 2,
           mark: null,
+          datum: [0, 2, 10],
         },
         transform: {
           x: 25,
@@ -200,6 +201,7 @@ describe('Rendering bands - areas', () => {
           x: 0,
           y: 10,
           mark: null,
+          datum: [0, 2, 10],
         },
         transform: {
           x: 25,
@@ -223,6 +225,7 @@ describe('Rendering bands - areas', () => {
           x: 1,
           y: 3,
           mark: null,
+          datum: [1, 3, 5],
         },
         styleOverrides: undefined,
         transform: {
@@ -248,6 +251,7 @@ describe('Rendering bands - areas', () => {
           x: 1,
           y: 5,
           mark: null,
+          datum: [1, 3, 5],
         },
         transform: {
           x: 25,
@@ -334,6 +338,7 @@ describe('Rendering bands - areas', () => {
             x: 0,
             y: 10,
             mark: null,
+            datum: [0, 2, 10],
           },
           transform: {
             x: 25,
@@ -351,6 +356,7 @@ describe('Rendering bands - areas', () => {
             x: 0,
             y: 2,
             mark: null,
+            datum: [0, 2, 10],
           },
         }),
       );
@@ -361,6 +367,7 @@ describe('Rendering bands - areas', () => {
             x: 0,
             y: 10,
             mark: null,
+            datum: [0, 2, 10],
           },
         }),
       );
@@ -373,6 +380,7 @@ describe('Rendering bands - areas', () => {
             x: 2,
             y: 3,
             mark: null,
+            datum: [2, 3, 5],
           },
         }),
       );
@@ -385,6 +393,7 @@ describe('Rendering bands - areas', () => {
             x: 2,
             y: 5,
             mark: null,
+            datum: [2, 3, 5],
           },
         }),
       );
@@ -397,6 +406,7 @@ describe('Rendering bands - areas', () => {
             x: 3,
             y: 3,
             mark: null,
+            datum: [3, 3, 5],
           },
         }),
       );
@@ -409,6 +419,7 @@ describe('Rendering bands - areas', () => {
             x: 3,
             y: 5,
             mark: null,
+            datum: [3, 3, 5],
           },
         }),
       );
@@ -463,6 +474,7 @@ describe('Rendering bands - areas', () => {
           x: 0,
           y: 10,
           mark: null,
+          datum: [0, 2, 10],
         },
         seriesIdentifier: {
           specId: SPEC_ID,
@@ -502,6 +514,7 @@ describe('Rendering bands - areas', () => {
           x: 2,
           y: 5,
           mark: null,
+          datum: [2, 3, 5],
         },
         seriesIdentifier: {
           specId: SPEC_ID,
@@ -541,6 +554,7 @@ describe('Rendering bands - areas', () => {
           x: 3,
           y: 8,
           mark: null,
+          datum: [3, 4, 8],
         },
         seriesIdentifier: {
           specId: SPEC_ID,
diff --git a/src/chart_types/xy_chart/rendering/rendering.bars.test.ts b/src/chart_types/xy_chart/rendering/rendering.bars.test.ts
index 553b4e1f78..1d479f1a96 100644
--- a/src/chart_types/xy_chart/rendering/rendering.bars.test.ts
+++ b/src/chart_types/xy_chart/rendering/rendering.bars.test.ts
@@ -82,6 +82,7 @@ describe('Rendering bars', () => {
             x: 0,
             y: 10,
             mark: null,
+            datum: [0, 10],
           },
           seriesIdentifier: {
             specId: SPEC_ID,
@@ -103,6 +104,7 @@ describe('Rendering bars', () => {
           value: {
             x: 1,
             y: 5,
+            datum: [1, 5],
           },
         }),
       );
@@ -217,6 +219,7 @@ describe('Rendering bars', () => {
           x: 0,
           y: 10,
           mark: null,
+          datum: [0, 10],
         },
         seriesIdentifier: {
           specId: spec1Id,
@@ -248,6 +251,7 @@ describe('Rendering bars', () => {
           value: {
             x: 0,
             y: 10,
+            datum: [0, 10],
           },
         }),
       );
@@ -260,6 +264,7 @@ describe('Rendering bars', () => {
           value: {
             x: 1,
             y: 5,
+            datum: [1, 5],
           },
         }),
       );
@@ -284,6 +289,7 @@ describe('Rendering bars', () => {
             accessor: 'y1',
             x: 0,
             y: 10,
+            datum: [0, 10],
           },
           seriesIdentifier: {
             specId: spec2Id,
@@ -305,6 +311,7 @@ describe('Rendering bars', () => {
           value: {
             x: 0,
             y: 20,
+            datum: [0, 20],
           },
         }),
       );
@@ -317,6 +324,7 @@ describe('Rendering bars', () => {
           value: {
             x: 1,
             y: 10,
+            datum: [1, 10],
           },
         }),
       );
@@ -368,6 +376,7 @@ describe('Rendering bars', () => {
             x: 0,
             y: 10,
             mark: null,
+            datum: [0, 10],
           },
           seriesIdentifier: {
             specId: SPEC_ID,
@@ -389,6 +398,7 @@ describe('Rendering bars', () => {
           value: {
             x: 1,
             y: 5,
+            datum: [1, 5],
           },
         }),
       );
@@ -500,6 +510,7 @@ describe('Rendering bars', () => {
             accessor: 'y1',
             x: 0,
             y: 10,
+            datum: [0, 10],
           },
           seriesIdentifier: {
             specId: spec1Id,
@@ -522,6 +533,7 @@ describe('Rendering bars', () => {
           value: {
             x: 1,
             y: 5,
+            datum: [1, 5],
           },
         }),
       );
@@ -546,6 +558,7 @@ describe('Rendering bars', () => {
             accessor: 'y1',
             x: 0,
             y: 20,
+            datum: [0, 20],
           },
           seriesIdentifier: {
             specId: spec2Id,
@@ -569,6 +582,7 @@ describe('Rendering bars', () => {
           value: {
             x: 1,
             y: 10,
+            datum: [1, 10],
           },
         }),
       );
@@ -636,6 +650,7 @@ describe('Rendering bars', () => {
             accessor: 'y1',
             x: 1546300800000,
             y: 10,
+            datum: [1546300800000, 10],
           },
           seriesIdentifier: {
             specId: spec1Id,
@@ -660,6 +675,7 @@ describe('Rendering bars', () => {
             x: 1546387200000,
             y: 5,
             mark: null,
+            datum: [1546387200000, 5],
           },
         }),
       );
@@ -685,6 +701,7 @@ describe('Rendering bars', () => {
             x: 1546300800000,
             y: 20,
             mark: null,
+            datum: [1546300800000, 20],
           },
           seriesIdentifier: {
             specId: spec2Id,
@@ -710,6 +727,7 @@ describe('Rendering bars', () => {
             x: 1546387200000,
             y: 10,
             mark: null,
+            datum: [1546387200000, 10],
           },
         }),
       );
diff --git a/src/chart_types/xy_chart/rendering/rendering.bubble.test.ts b/src/chart_types/xy_chart/rendering/rendering.bubble.test.ts
index 28d97cd828..57727865c9 100644
--- a/src/chart_types/xy_chart/rendering/rendering.bubble.test.ts
+++ b/src/chart_types/xy_chart/rendering/rendering.bubble.test.ts
@@ -160,6 +160,7 @@ describe('Rendering points - bubble', () => {
           x: 0,
           y: 10,
           mark: null,
+          datum: [0, 10],
         },
         transform: {
           x: 25,
@@ -183,6 +184,7 @@ describe('Rendering points - bubble', () => {
           x: 1,
           y: 5,
           mark: null,
+          datum: [1, 5],
         },
         transform: {
           x: 25,
@@ -306,6 +308,7 @@ describe('Rendering points - bubble', () => {
           x: 0,
           y: 10,
           mark: null,
+          datum: [0, 10],
         },
         transform: {
           x: 25,
@@ -329,6 +332,7 @@ describe('Rendering points - bubble', () => {
           x: 1,
           y: 5,
           mark: null,
+          datum: [1, 5],
         },
         transform: {
           x: 25,
@@ -360,6 +364,7 @@ describe('Rendering points - bubble', () => {
           x: 0,
           y: 20,
           mark: null,
+          datum: [0, 20],
         },
         transform: {
           x: 25,
@@ -383,6 +388,7 @@ describe('Rendering points - bubble', () => {
           x: 1,
           y: 10,
           mark: null,
+          datum: [1, 10],
         },
         transform: {
           x: 25,
@@ -465,6 +471,7 @@ describe('Rendering points - bubble', () => {
           x: 0,
           y: 10,
           mark: null,
+          datum: [0, 10],
         },
         transform: {
           x: 0,
@@ -488,6 +495,7 @@ describe('Rendering points - bubble', () => {
           x: 1,
           y: 5,
           mark: null,
+          datum: [1, 5],
         },
         transform: {
           x: 0,
@@ -610,6 +618,7 @@ describe('Rendering points - bubble', () => {
           x: 0,
           y: 10,
           mark: null,
+          datum: [0, 10],
         },
         transform: {
           x: 0,
@@ -633,6 +642,7 @@ describe('Rendering points - bubble', () => {
           x: 1,
           y: 5,
           mark: null,
+          datum: [1, 5],
         },
         transform: {
           x: 0,
@@ -664,6 +674,7 @@ describe('Rendering points - bubble', () => {
           x: 0,
           y: 20,
           mark: null,
+          datum: [0, 20],
         },
         transform: {
           x: 0,
@@ -687,6 +698,7 @@ describe('Rendering points - bubble', () => {
           x: 1,
           y: 10,
           mark: null,
+          datum: [1, 10],
         },
         transform: {
           x: 0,
@@ -769,6 +781,7 @@ describe('Rendering points - bubble', () => {
           x: 1546300800000,
           y: 10,
           mark: null,
+          datum: [1546300800000, 10],
         },
         transform: {
           x: 0,
@@ -792,6 +805,7 @@ describe('Rendering points - bubble', () => {
           x: 1546387200000,
           y: 5,
           mark: null,
+          datum: [1546387200000, 5],
         },
         transform: {
           x: 0,
@@ -903,6 +917,7 @@ describe('Rendering points - bubble', () => {
           x: 1546300800000,
           y: 10,
           mark: null,
+          datum: [1546300800000, 10],
         },
         transform: {
           x: 0,
@@ -926,6 +941,7 @@ describe('Rendering points - bubble', () => {
           x: 1546387200000,
           y: 5,
           mark: null,
+          datum: [1546387200000, 5],
         },
         transform: {
           x: 0,
@@ -957,6 +973,7 @@ describe('Rendering points - bubble', () => {
           x: 1546300800000,
           y: 20,
           mark: null,
+          datum: [1546300800000, 20],
         },
         transform: {
           x: 0,
@@ -980,6 +997,7 @@ describe('Rendering points - bubble', () => {
           x: 1546387200000,
           y: 10,
           mark: null,
+          datum: [1546387200000, 10],
         },
         transform: {
           x: 0,
@@ -1147,6 +1165,7 @@ describe('Rendering points - bubble', () => {
           x: 0,
           y: 0,
           mark: null,
+          datum: [0, 0],
         },
         transform: {
           x: 25,
@@ -1170,6 +1189,7 @@ describe('Rendering points - bubble', () => {
           x: 1,
           y: 1,
           mark: null,
+          datum: [1, 1],
         },
         transform: {
           x: 25,
diff --git a/src/chart_types/xy_chart/rendering/rendering.lines.test.ts b/src/chart_types/xy_chart/rendering/rendering.lines.test.ts
index 16d3df1544..1fd525240f 100644
--- a/src/chart_types/xy_chart/rendering/rendering.lines.test.ts
+++ b/src/chart_types/xy_chart/rendering/rendering.lines.test.ts
@@ -165,6 +165,7 @@ describe('Rendering points - line', () => {
           x: 0,
           y: 10,
           mark: null,
+          datum: [0, 10],
         },
         transform: {
           x: 25,
@@ -188,6 +189,7 @@ describe('Rendering points - line', () => {
           x: 1,
           y: 5,
           mark: null,
+          datum: [1, 5],
         },
         transform: {
           x: 25,
@@ -315,6 +317,7 @@ describe('Rendering points - line', () => {
           x: 0,
           y: 10,
           mark: null,
+          datum: [0, 10],
         },
         transform: {
           x: 25,
@@ -338,6 +341,7 @@ describe('Rendering points - line', () => {
           x: 1,
           y: 5,
           mark: null,
+          datum: [1, 5],
         },
         transform: {
           x: 25,
@@ -369,6 +373,7 @@ describe('Rendering points - line', () => {
           x: 0,
           y: 20,
           mark: null,
+          datum: [0, 20],
         },
         transform: {
           x: 25,
@@ -392,6 +397,7 @@ describe('Rendering points - line', () => {
           x: 1,
           y: 10,
           mark: null,
+          datum: [1, 10],
         },
         transform: {
           x: 25,
@@ -476,6 +482,7 @@ describe('Rendering points - line', () => {
           x: 0,
           y: 10,
           mark: null,
+          datum: [0, 10],
         },
         transform: {
           x: 0,
@@ -499,6 +506,7 @@ describe('Rendering points - line', () => {
           x: 1,
           y: 5,
           mark: null,
+          datum: [1, 5],
         },
         transform: {
           x: 0,
@@ -625,6 +633,7 @@ describe('Rendering points - line', () => {
           x: 0,
           y: 10,
           mark: null,
+          datum: [0, 10],
         },
         transform: {
           x: 0,
@@ -648,6 +657,7 @@ describe('Rendering points - line', () => {
           x: 1,
           y: 5,
           mark: null,
+          datum: [1, 5],
         },
         transform: {
           x: 0,
@@ -679,6 +689,7 @@ describe('Rendering points - line', () => {
           x: 0,
           y: 20,
           mark: null,
+          datum: [0, 20],
         },
         transform: {
           x: 0,
@@ -702,6 +713,7 @@ describe('Rendering points - line', () => {
           x: 1,
           y: 10,
           mark: null,
+          datum: [1, 10],
         },
         transform: {
           x: 0,
@@ -786,6 +798,7 @@ describe('Rendering points - line', () => {
           x: 1546300800000,
           y: 10,
           mark: null,
+          datum: [1546300800000, 10],
         },
         transform: {
           x: 0,
@@ -809,6 +822,7 @@ describe('Rendering points - line', () => {
           x: 1546387200000,
           y: 5,
           mark: null,
+          datum: [1546387200000, 5],
         },
         transform: {
           x: 0,
@@ -922,6 +936,7 @@ describe('Rendering points - line', () => {
           x: 1546300800000,
           y: 10,
           mark: null,
+          datum: [1546300800000, 10],
         },
         transform: {
           x: 0,
@@ -945,6 +960,7 @@ describe('Rendering points - line', () => {
           x: 1546387200000,
           y: 5,
           mark: null,
+          datum: [1546387200000, 5],
         },
         transform: {
           x: 0,
@@ -976,6 +992,7 @@ describe('Rendering points - line', () => {
           x: 1546300800000,
           y: 20,
           mark: null,
+          datum: [1546300800000, 20],
         },
         transform: {
           x: 0,
@@ -999,6 +1016,7 @@ describe('Rendering points - line', () => {
           x: 1546387200000,
           y: 10,
           mark: null,
+          datum: [1546387200000, 10],
         },
         transform: {
           x: 0,
@@ -1168,6 +1186,7 @@ describe('Rendering points - line', () => {
           x: 0,
           y: 0,
           mark: null,
+          datum: [0, 0],
         },
         transform: {
           x: 25,
@@ -1191,6 +1210,7 @@ describe('Rendering points - line', () => {
           x: 1,
           y: 1,
           mark: null,
+          datum: [1, 1],
         },
         transform: {
           x: 25,
diff --git a/src/chart_types/xy_chart/rendering/rendering.test.ts b/src/chart_types/xy_chart/rendering/rendering.test.ts
index 9fa6efbc14..a36b0746b3 100644
--- a/src/chart_types/xy_chart/rendering/rendering.test.ts
+++ b/src/chart_types/xy_chart/rendering/rendering.test.ts
@@ -67,6 +67,7 @@ describe('Rendering utils', () => {
         x: 0,
         y: 0,
         mark: null,
+        datum: { x: 0, y: 0 },
       },
       x: 0,
       y: 0,
@@ -97,6 +98,7 @@ describe('Rendering utils', () => {
         x: 0,
         y: 0,
         mark: null,
+        datum: { x: 0, y: 0 },
       },
       transform: {
         x: 0,
diff --git a/src/chart_types/xy_chart/rendering/rendering.ts b/src/chart_types/xy_chart/rendering/rendering.ts
index 2033de1ccd..cc9ffb8509 100644
--- a/src/chart_types/xy_chart/rendering/rendering.ts
+++ b/src/chart_types/xy_chart/rendering/rendering.ts
@@ -239,6 +239,7 @@ function renderPoints(
           y: originalY,
           mark,
           accessor: hasY0Accessors && index === 0 ? BandedAccessorType.Y0 : BandedAccessorType.Y1,
+          datum: datum.datum,
         },
         transform: {
           x: shift,
@@ -430,6 +431,7 @@ export function renderBars(
         y: originalY1Value,
         mark: null,
         accessor: BandedAccessorType.Y1,
+        datum: datum.datum,
       },
       seriesIdentifier,
       seriesStyle,
diff --git a/src/chart_types/xy_chart/state/chart_state.interactions.test.ts b/src/chart_types/xy_chart/state/chart_state.interactions.test.ts
index e7c736c479..2740274a81 100644
--- a/src/chart_types/xy_chart/state/chart_state.interactions.test.ts
+++ b/src/chart_types/xy_chart/state/chart_state.interactions.test.ts
@@ -417,6 +417,7 @@ function mouseOverTestSuite(scaleType: ScaleType) {
           y: 10,
           accessor: 'y1',
           mark: null,
+          datum: [0, 10],
         },
         {
           key: 'spec{spec_1}yAccessor{1}splitAccessors{}',
@@ -462,6 +463,7 @@ function mouseOverTestSuite(scaleType: ScaleType) {
           y: 10,
           accessor: 'y1',
           mark: null,
+          datum: [0, 10],
         },
         {
           key: 'spec{spec_1}yAccessor{1}splitAccessors{}',
@@ -510,6 +512,7 @@ function mouseOverTestSuite(scaleType: ScaleType) {
           y: 10,
           accessor: 'y1',
           mark: null,
+          datum: [0, 10],
         },
         {
           key: 'spec{spec_1}yAccessor{1}splitAccessors{}',
@@ -563,6 +566,7 @@ function mouseOverTestSuite(scaleType: ScaleType) {
           y: (spec.data[0] as Array<any>)[1],
           accessor: 'y1',
           mark: null,
+          datum: [(spec.data[0] as Array<any>)[0], (spec.data[0] as Array<any>)[1]],
         },
         {
           key: 'spec{spec_1}yAccessor{1}splitAccessors{}',
@@ -595,6 +599,7 @@ function mouseOverTestSuite(scaleType: ScaleType) {
           y: (spec.data[1] as Array<any>)[1],
           accessor: 'y1',
           mark: null,
+          datum: [(spec.data[1] as Array<any>)[0], (spec.data[1] as Array<any>)[1]],
         },
         {
           key: 'spec{spec_1}yAccessor{1}splitAccessors{}',
@@ -691,6 +696,7 @@ function mouseOverTestSuite(scaleType: ScaleType) {
           y: 5,
           accessor: 'y1',
           mark: null,
+          datum: [1, 5],
         },
         {
           key: 'spec{spec_1}yAccessor{1}splitAccessors{}',
diff --git a/src/chart_types/xy_chart/state/chart_state.test.ts b/src/chart_types/xy_chart/state/chart_state.test.ts
index 7c978b7f25..07c920c10f 100644
--- a/src/chart_types/xy_chart/state/chart_state.test.ts
+++ b/src/chart_types/xy_chart/state/chart_state.test.ts
@@ -933,6 +933,7 @@ describe.skip('Chart Store', () => {
         y: 1,
         accessor: 'y1',
         mark: null,
+        datum: { x: 0, y: 1 },
       },
       x: 0,
       y: 0,
@@ -954,6 +955,7 @@ describe.skip('Chart Store', () => {
         y: 3,
         accessor: 'y1',
         mark: null,
+        datum: { x: 0, y: 3 },
       },
       x: 50,
       y: 0,
@@ -1149,6 +1151,7 @@ describe.skip('Chart Store', () => {
           y: 1,
           accessor: 'y1',
           mark: null,
+          datum: { x: 0, y: 1 },
         },
         x: 0,
         y: 0,
diff --git a/src/chart_types/xy_chart/state/utils/utils.test.ts b/src/chart_types/xy_chart/state/utils/utils.test.ts
index bf6d91cd21..3002ea1421 100644
--- a/src/chart_types/xy_chart/state/utils/utils.test.ts
+++ b/src/chart_types/xy_chart/state/utils/utils.test.ts
@@ -1113,7 +1113,7 @@ describe('Chart State utils', () => {
         x: 0,
         y: 0,
         color: '#1EA593',
-        value: { x: 0, y: 5, accessor: BandedAccessorType.Y1, mark: null },
+        value: { x: 0, y: 5, accessor: BandedAccessorType.Y1, mark: null, datum: { x: 0, y: 5 } },
         transform: { x: 0, y: 0 },
         seriesIdentifier: {
           specId: 'line1',
@@ -1131,7 +1131,7 @@ describe('Chart State utils', () => {
         x: 0,
         y: 175.8,
         color: '#2B70F7',
-        value: { x: 0, y: 2, accessor: BandedAccessorType.Y1, mark: null },
+        value: { x: 0, y: 2, accessor: BandedAccessorType.Y1, mark: null, datum: { x: 0, y: 5 } },
         transform: { x: 0, y: 0 },
         seriesIdentifier: {
           specId: 'line2',
diff --git a/src/chart_types/xy_chart/tooltip/tooltip.test.ts b/src/chart_types/xy_chart/tooltip/tooltip.test.ts
index bb17bb66ac..a743e062c2 100644
--- a/src/chart_types/xy_chart/tooltip/tooltip.test.ts
+++ b/src/chart_types/xy_chart/tooltip/tooltip.test.ts
@@ -99,6 +99,7 @@ describe('Tooltip formatting', () => {
       y: 10,
       accessor: 'y1',
       mark: null,
+      datum: { x: 1, y: 10 },
     },
     seriesStyle,
   };
@@ -120,6 +121,7 @@ describe('Tooltip formatting', () => {
       y: 10,
       accessor: 'y1',
       mark: null,
+      datum: { x: 1, y: 10 },
     },
     seriesStyle,
   };
@@ -349,6 +351,7 @@ describe('Tooltip formatting', () => {
         y: 10,
         accessor: 'y1',
         mark: 10,
+        datum: { x: 1, y: 10 },
       },
     };
 
diff --git a/src/chart_types/xy_chart/utils/interactions.test.ts b/src/chart_types/xy_chart/utils/interactions.test.ts
index 2c4d0e72fa..e7753a476f 100644
--- a/src/chart_types/xy_chart/utils/interactions.test.ts
+++ b/src/chart_types/xy_chart/utils/interactions.test.ts
@@ -60,6 +60,7 @@ const ig1: IndexedGeometry = {
     x: 0,
     y: 1,
     mark: null,
+    datum: { x: 0, y: 1 },
   },
   x: 0,
   y: 0,
@@ -80,6 +81,7 @@ const ig2: IndexedGeometry = {
     x: 0,
     y: 1,
     mark: null,
+    datum: { x: 0, y: 1 },
   },
   color: 'red',
   x: 0,
@@ -101,6 +103,7 @@ const ig3: IndexedGeometry = {
     x: 123,
     y: 123,
     mark: null,
+    datum: { x: 123, y: 123 },
   },
   color: 'red',
 
@@ -123,6 +126,7 @@ const ig4: IndexedGeometry = {
     x: 123,
     y: 123,
     mark: null,
+    datum: { x: 123, y: 123 },
   },
   color: 'blue',
   x: 0,
@@ -144,6 +148,7 @@ const ig5: IndexedGeometry = {
     x: 123,
     y: 123,
     mark: null,
+    datum: { x: 123, y: 123 },
   },
   color: 'red',
   x: 0,
@@ -165,6 +170,7 @@ const ig6: PointGeometry = {
     x: 123,
     y: 123,
     mark: null,
+    datum: { x: 123, y: 123 },
   },
   color: 'red',
   x: 0,
diff --git a/src/mocks/geometries.ts b/src/mocks/geometries.ts
index 93d6723739..27393e87a4 100644
--- a/src/mocks/geometries.ts
+++ b/src/mocks/geometries.ts
@@ -40,6 +40,7 @@ export class MockPointGeometry {
       x: 0,
       y: 0,
       mark: null,
+      datum: { x: 0, y: 0 },
     },
     transform: {
       x: 25,
@@ -81,6 +82,7 @@ export class MockBarGeometry {
       x: 0,
       y: 0,
       mark: null,
+      datum: { x: 0, y: 0 },
     },
     seriesStyle: barSeriesStyle,
   };
diff --git a/src/utils/geometry.ts b/src/utils/geometry.ts
index 5a53d51e59..5e6ad42c3e 100644
--- a/src/utils/geometry.ts
+++ b/src/utils/geometry.ts
@@ -38,6 +38,10 @@ export interface GeometryValue {
   x: any;
   mark: number | null;
   accessor: BandedAccessorType;
+  /**
+   * The original datum used for this geometry
+   */
+  datum: any;
 }
 
 export type IndexedGeometry = PointGeometry | BarGeometry;
diff --git a/stories/interactions/1_bar_clicks.tsx b/stories/interactions/1_bar_clicks.tsx
index cb7e16d541..ca808f4a98 100644
--- a/stories/interactions/1_bar_clicks.tsx
+++ b/stories/interactions/1_bar_clicks.tsx
@@ -18,6 +18,7 @@
  */
 
 import { action } from '@storybook/addon-actions';
+import { boolean } from '@storybook/addon-knobs';
 import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings, TooltipValue, TooltipValueFormatter } from '../../src';
@@ -29,6 +30,7 @@ const onElementListeners = {
 };
 
 export const Example = () => {
+  const useObjectAsX = boolean('use object on x', false);
   const headerFormatter: TooltipValueFormatter = (tooltip: TooltipValue) => {
     if (tooltip.value % 2 === 0) {
       return (
@@ -60,15 +62,15 @@ export const Example = () => {
 
       <BarSeries
         id="bars"
-        xScaleType={ScaleType.Linear}
+        xScaleType={useObjectAsX ? ScaleType.Ordinal : ScaleType.Linear}
         yScaleType={ScaleType.Linear}
-        xAccessor="x"
+        xAccessor={useObjectAsX ? 'sObj' : 'x'}
         yAccessors={['y']}
         data={[
-          { x: 0, y: 2 },
-          { x: 1, y: 7 },
-          { x: 2, y: 3 },
-          { x: 3, y: 6 },
+          { x: 0, y: 2, obj: { from: 10, to: 20 }, sObj: 'from 10 to 20' },
+          { x: 1, y: 7, obj: { from: 20, to: 30 }, sObj: 'from 20 to 30' },
+          { x: 2, y: 3, obj: { from: 30, to: 40 }, sObj: 'from 30 to 40' },
+          { x: 3, y: 6, obj: { from: 40, to: 50 }, sObj: 'from 40 to 50' },
         ]}
       />
     </Chart>