diff --git a/src/ui/public/vislib/visualizations/point_series/area_chart.js b/src/ui/public/vislib/visualizations/point_series/area_chart.js
index f135ef9709e21..5d8bc2d1f5935 100644
--- a/src/ui/public/vislib/visualizations/point_series/area_chart.js
+++ b/src/ui/public/vislib/visualizations/point_series/area_chart.js
@@ -153,7 +153,8 @@ export default function AreaChartFactory(Private) {
       const isHorizontal = this.getCategoryAxis().axisConfig.isHorizontal();
 
       const layer = svg.append('g')
-      .attr('class', 'points area');
+        .attr('class', 'points area')
+        .attr('clip-path', 'url(#' + this.baseChart.clipPathId + ')');
 
       // append the circles
       const circles = layer.selectAll('circles')
diff --git a/src/ui/public/vislib/visualizations/point_series/line_chart.js b/src/ui/public/vislib/visualizations/point_series/line_chart.js
index 6a020ef7688d5..8c8a61e251781 100644
--- a/src/ui/public/vislib/visualizations/point_series/line_chart.js
+++ b/src/ui/public/vislib/visualizations/point_series/line_chart.js
@@ -47,7 +47,8 @@ export default function LineChartFactory(Private) {
       const radiusStep = ((radii.max - radii.min) || (radii.max * 100)) / Math.pow(this.seriesConfig.radiusRatio, 2);
 
       const layer = svg.append('g')
-      .attr('class', 'points line');
+        .attr('class', 'points line')
+        .attr('clip-path', 'url(#' + this.baseChart.clipPathId + ')');
 
       const circles = layer
       .selectAll('circle')