diff --git a/CHANGELOG.md b/CHANGELOG.md
index 268f91b2e30..6d7ed3a013a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,6 +25,8 @@
 - `EuiWrappingPopover` only re-attach anchor element on unmount if anchor element is still attached to DOM
 ([#1114](https://github.com/elastic/eui/pull/1114))
 
+- Fixed `EuiSeriesChart` overrides `react-vis` classes.([#1123](https://github.com/elastic/eui/pull/1123))
+
 ## [`3.5.1`](https://github.com/elastic/eui/tree/v3.5.1)
 
 - Fixed a bug around `indeterminate` checkboxes ([#1110](https://github.com/elastic/eui/pull/1110))
diff --git a/src/components/series_chart/_index.scss b/src/components/series_chart/_index.scss
index 38b1e86cc26..4653686d02f 100644
--- a/src/components/series_chart/_index.scss
+++ b/src/components/series_chart/_index.scss
@@ -1,11 +1,12 @@
 /* react-vis scss styles copied and pasted from react-vis lib */
-@import "styles/react_vis/plot";
-@import "styles/react_vis/legends";
-@import "styles/react_vis/radial-chart";
-@import "styles/react_vis/treemap";
+.euiSeriesChartContainer {
+  @import "styles/react_vis/plot";
+  @import "styles/react_vis/legends";
+  @import "styles/react_vis/radial-chart";
+  @import "styles/react_vis/treemap";
+  @import "styles/react_vis/overrides";
+}
 
 @import "series/index";
-@import "axis/index";
 @import "legend";
 @import "line_annotation";
-@import "series_chart";
diff --git a/src/components/series_chart/_series_chart.scss b/src/components/series_chart/_series_chart.scss
deleted file mode 100644
index 7017226e452..00000000000
--- a/src/components/series_chart/_series_chart.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.rv-xy-plot {
-  width: 100% !important;  // this because react-vis fix the width of the container in px
-  height: 100% !important; // avoid a correct computation of the component size
-}
diff --git a/src/components/series_chart/axis/__snapshots__/default_axis.test.js.snap b/src/components/series_chart/axis/__snapshots__/default_axis.test.js.snap
index 98d6cede4cf..47b143e63f8 100644
--- a/src/components/series_chart/axis/__snapshots__/default_axis.test.js.snap
+++ b/src/components/series_chart/axis/__snapshots__/default_axis.test.js.snap
@@ -6,7 +6,7 @@ exports[`EuiDefaultAxis render default axis 1`] = `
 >
   <div
     aria-label="aria-label"
-    class="testClass1 testClass2"
+    class="testClass1 testClass2 euiSeriesChartContainer"
     data-test-subj="test subject string"
   >
     <div
@@ -464,7 +464,7 @@ exports[`EuiDefaultAxis render rotated 90deg default axis 1`] = `
 >
   <div
     aria-label="aria-label"
-    class="testClass1 testClass2"
+    class="testClass1 testClass2 euiSeriesChartContainer"
     data-test-subj="test subject string"
   >
     <div
diff --git a/src/components/series_chart/axis/__snapshots__/horizontal_grid.test.js.snap b/src/components/series_chart/axis/__snapshots__/horizontal_grid.test.js.snap
index 361edc11e17..feac8a7b12e 100644
--- a/src/components/series_chart/axis/__snapshots__/horizontal_grid.test.js.snap
+++ b/src/components/series_chart/axis/__snapshots__/horizontal_grid.test.js.snap
@@ -6,7 +6,7 @@ exports[`EuiHorizontalGrid render the horizontal grid 1`] = `
 >
   <div
     aria-label="aria-label"
-    class="testClass1 testClass2"
+    class="testClass1 testClass2 euiSeriesChartContainer"
     data-test-subj="test subject string"
   >
     <div
diff --git a/src/components/series_chart/axis/__snapshots__/vertical_grid.test.js.snap b/src/components/series_chart/axis/__snapshots__/vertical_grid.test.js.snap
index 81ebb579107..4e2054c0d97 100644
--- a/src/components/series_chart/axis/__snapshots__/vertical_grid.test.js.snap
+++ b/src/components/series_chart/axis/__snapshots__/vertical_grid.test.js.snap
@@ -6,7 +6,7 @@ exports[`EuiVerticalGrid render the vertical grid 1`] = `
 >
   <div
     aria-label="aria-label"
-    class="testClass1 testClass2"
+    class="testClass1 testClass2 euiSeriesChartContainer"
     data-test-subj="test subject string"
   >
     <div
diff --git a/src/components/series_chart/axis/__snapshots__/x_axis.test.js.snap b/src/components/series_chart/axis/__snapshots__/x_axis.test.js.snap
index 8fece022098..b280780d376 100644
--- a/src/components/series_chart/axis/__snapshots__/x_axis.test.js.snap
+++ b/src/components/series_chart/axis/__snapshots__/x_axis.test.js.snap
@@ -6,7 +6,7 @@ exports[`EuiXAxis render the x axis 1`] = `
 >
   <div
     aria-label="aria-label"
-    class="testClass1 testClass2"
+    class="testClass1 testClass2 euiSeriesChartContainer"
     data-test-subj="test subject string"
   >
     <div
diff --git a/src/components/series_chart/axis/__snapshots__/y_axis.test.js.snap b/src/components/series_chart/axis/__snapshots__/y_axis.test.js.snap
index fca104795d9..ff74ab492a9 100644
--- a/src/components/series_chart/axis/__snapshots__/y_axis.test.js.snap
+++ b/src/components/series_chart/axis/__snapshots__/y_axis.test.js.snap
@@ -6,7 +6,7 @@ exports[`EuiYAxis render the y axis 1`] = `
 >
   <div
     aria-label="aria-label"
-    class="testClass1 testClass2"
+    class="testClass1 testClass2 euiSeriesChartContainer"
     data-test-subj="test subject string"
   >
     <div
diff --git a/src/components/series_chart/axis/_index.scss b/src/components/series_chart/axis/_index.scss
deleted file mode 100644
index fb806d52f24..00000000000
--- a/src/components/series_chart/axis/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "grids";
diff --git a/src/components/series_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap b/src/components/series_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap
index 53808a2498a..7f2cd1b9cb3 100644
--- a/src/components/series_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap
+++ b/src/components/series_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap
@@ -6,7 +6,7 @@ exports[`EuiCrosshairX render the X crosshair 1`] = `
 >
   <div
     aria-label="aria-label"
-    class="testClass1 testClass2"
+    class="testClass1 testClass2 euiSeriesChartContainer"
     data-test-subj="test subject string"
   >
     <div
diff --git a/src/components/series_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap b/src/components/series_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap
index c42aa7905bc..f21208a2808 100644
--- a/src/components/series_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap
+++ b/src/components/series_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap
@@ -6,7 +6,7 @@ exports[`EuiCrosshairY render the Y crosshair 1`] = `
 >
   <div
     aria-label="aria-label"
-    class="testClass1 testClass2"
+    class="testClass1 testClass2 euiSeriesChartContainer"
     data-test-subj="test subject string"
   >
     <div
diff --git a/src/components/series_chart/series/__snapshots__/area_series.test.js.snap b/src/components/series_chart/series/__snapshots__/area_series.test.js.snap
index e2cd965662d..24764feab26 100644
--- a/src/components/series_chart/series/__snapshots__/area_series.test.js.snap
+++ b/src/components/series_chart/series/__snapshots__/area_series.test.js.snap
@@ -43,7 +43,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = `
     >
       <div
         aria-label="aria-label"
-        className="testClass1 testClass2"
+        className="testClass1 testClass2 euiSeriesChartContainer"
         data-test-subj="test subject string"
       >
         <XYPlot
diff --git a/src/components/series_chart/series/__snapshots__/horizontal_bar_series.test.js.snap b/src/components/series_chart/series/__snapshots__/horizontal_bar_series.test.js.snap
index 1b9f42a3ed4..e6705667847 100644
--- a/src/components/series_chart/series/__snapshots__/horizontal_bar_series.test.js.snap
+++ b/src/components/series_chart/series/__snapshots__/horizontal_bar_series.test.js.snap
@@ -4,7 +4,9 @@ exports[`EuiHorizontalBarSeries all props are rendered 1`] = `
 <div
   style="width:100%;height:100%"
 >
-  <div>
+  <div
+    class="euiSeriesChartContainer"
+  >
     <div
       class="rv-xy-plot "
       style="width:600px;height:200px"
@@ -440,7 +442,7 @@ exports[`EuiHorizontalBarSeries is rendered 1`] = `
 >
   <div
     aria-label="aria-label"
-    class="testClass1 testClass2"
+    class="testClass1 testClass2 euiSeriesChartContainer"
     data-test-subj="test subject string"
   >
     <div
@@ -876,7 +878,9 @@ exports[`EuiHorizontalBarSeries renders stacked bar chart 1`] = `
 <div
   style="width:100%;height:100%"
 >
-  <div>
+  <div
+    class="euiSeriesChartContainer"
+  >
     <div
       class="rv-xy-plot "
       style="width:600px;height:200px"
diff --git a/src/components/series_chart/series/__snapshots__/horizontal_rect_series.test.js.snap b/src/components/series_chart/series/__snapshots__/horizontal_rect_series.test.js.snap
index 603ef363912..d23051b186f 100644
--- a/src/components/series_chart/series/__snapshots__/horizontal_rect_series.test.js.snap
+++ b/src/components/series_chart/series/__snapshots__/horizontal_rect_series.test.js.snap
@@ -4,7 +4,9 @@ exports[`EuiHorizontalRectSeries all props are rendered 1`] = `
 <div
   style="width:100%;height:100%"
 >
-  <div>
+  <div
+    class="euiSeriesChartContainer"
+  >
     <div
       class="rv-xy-plot "
       style="width:600px;height:200px"
@@ -440,7 +442,7 @@ exports[`EuiHorizontalRectSeries is rendered 1`] = `
 >
   <div
     aria-label="aria-label"
-    class="testClass1 testClass2"
+    class="testClass1 testClass2 euiSeriesChartContainer"
     data-test-subj="test subject string"
   >
     <div
@@ -876,7 +878,9 @@ exports[`EuiHorizontalRectSeries renders stacked bar chart 1`] = `
 <div
   style="width:100%;height:100%"
 >
-  <div>
+  <div
+    class="euiSeriesChartContainer"
+  >
     <div
       class="rv-xy-plot "
       style="width:600px;height:200px"
diff --git a/src/components/series_chart/series/__snapshots__/line_series.test.js.snap b/src/components/series_chart/series/__snapshots__/line_series.test.js.snap
index a8ef8738e81..a6634707792 100644
--- a/src/components/series_chart/series/__snapshots__/line_series.test.js.snap
+++ b/src/components/series_chart/series/__snapshots__/line_series.test.js.snap
@@ -35,7 +35,9 @@ exports[`EuiLineSeries all props are rendered 1`] = `
       yPadding={0}
       yType="linear"
     >
-      <div>
+      <div
+        className="euiSeriesChartContainer"
+      >
         <XYPlot
           animation={true}
           className=""
@@ -4156,7 +4158,7 @@ exports[`EuiLineSeries is rendered 1`] = `
     >
       <div
         aria-label="aria-label"
-        className="testClass1 testClass2"
+        className="testClass1 testClass2 euiSeriesChartContainer"
         data-test-subj="test subject string"
       >
         <XYPlot
diff --git a/src/components/series_chart/series/__snapshots__/vertical_bar_series.test.js.snap b/src/components/series_chart/series/__snapshots__/vertical_bar_series.test.js.snap
index c458e6d06a4..7805ce7545a 100644
--- a/src/components/series_chart/series/__snapshots__/vertical_bar_series.test.js.snap
+++ b/src/components/series_chart/series/__snapshots__/vertical_bar_series.test.js.snap
@@ -4,7 +4,9 @@ exports[`EuiVerticalBarSeries all props are rendered 1`] = `
 <div
   style="width:100%;height:100%"
 >
-  <div>
+  <div
+    class="euiSeriesChartContainer"
+  >
     <div
       class="rv-xy-plot "
       style="width:600px;height:200px"
@@ -501,7 +503,7 @@ exports[`EuiVerticalBarSeries is rendered 1`] = `
 >
   <div
     aria-label="aria-label"
-    class="testClass1 testClass2"
+    class="testClass1 testClass2 euiSeriesChartContainer"
     data-test-subj="test subject string"
   >
     <div
@@ -998,7 +1000,9 @@ exports[`EuiVerticalBarSeries renders stacked bar chart 1`] = `
 <div
   style="width:100%;height:100%"
 >
-  <div>
+  <div
+    class="euiSeriesChartContainer"
+  >
     <div
       class="rv-xy-plot "
       style="width:600px;height:200px"
diff --git a/src/components/series_chart/series/__snapshots__/vertical_rect_series.test.js.snap b/src/components/series_chart/series/__snapshots__/vertical_rect_series.test.js.snap
index c8b40ba2bd6..9ae783f9375 100644
--- a/src/components/series_chart/series/__snapshots__/vertical_rect_series.test.js.snap
+++ b/src/components/series_chart/series/__snapshots__/vertical_rect_series.test.js.snap
@@ -4,7 +4,9 @@ exports[`EuiVerticalRectSeries all props are rendered 1`] = `
 <div
   style="width:100%;height:100%"
 >
-  <div>
+  <div
+    class="euiSeriesChartContainer"
+  >
     <div
       class="rv-xy-plot "
       style="width:600px;height:200px"
@@ -521,7 +523,7 @@ exports[`EuiVerticalRectSeries is rendered 1`] = `
 >
   <div
     aria-label="aria-label"
-    class="testClass1 testClass2"
+    class="testClass1 testClass2 euiSeriesChartContainer"
     data-test-subj="test subject string"
   >
     <div
@@ -1038,7 +1040,9 @@ exports[`EuiVerticalRectSeries renders stacked vertical histogram 1`] = `
 <div
   style="width:100%;height:100%"
 >
-  <div>
+  <div
+    class="euiSeriesChartContainer"
+  >
     <div
       class="rv-xy-plot "
       style="width:600px;height:200px"
diff --git a/src/components/series_chart/series_chart.js b/src/components/series_chart/series_chart.js
index 4d8de063b7c..b31646a5108 100644
--- a/src/components/series_chart/series_chart.js
+++ b/src/components/series_chart/series_chart.js
@@ -1,4 +1,5 @@
 import React, { PureComponent, Fragment } from 'react';
+import classNames from 'classnames';
 import { XYPlot, AbstractSeries  } from 'react-vis';
 import { makeFlexible } from './utils/flexible';
 import PropTypes from 'prop-types';
@@ -108,6 +109,7 @@ class XYChart extends PureComponent {
       orientation,
       crosshairValue,
       onCrosshairUpdate,
+      className,
       ...rest
     } = this.props;
 
@@ -127,8 +129,12 @@ class XYChart extends PureComponent {
 
     const Crosshair = orientation === HORIZONTAL ? EuiCrosshairY : EuiCrosshairX;
     const seriesNames = this._getSeriesNames(children);
+    const classes = classNames(className, 'euiSeriesChartContainer');
     return (
-      <div {...rest}>
+      <div
+        className={classes}
+        {...rest}
+      >
         <XYPlot
           ref={this._xyPlotRef}
           dontCheckIfEmpty
diff --git a/src/components/series_chart/axis/_grids.scss b/src/components/series_chart/styles/react_vis/overrides.scss
similarity index 68%
rename from src/components/series_chart/axis/_grids.scss
rename to src/components/series_chart/styles/react_vis/overrides.scss
index f924182f3c8..48e8994f984 100644
--- a/src/components/series_chart/axis/_grids.scss
+++ b/src/components/series_chart/styles/react_vis/overrides.scss
@@ -1,3 +1,8 @@
+.rv-xy-plot {
+  width: 100% !important;  // this because react-vis fix the width of the container in px
+  height: 100% !important; // avoid a correct computation of the component size
+}
+
 // NOTE: the current implementation of react-vis doesn't supports
 // adding classes to grid lines but only a style prop is supported.
 // We can overwrite here the original react-vis class or overwrite