diff --git a/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_splits.js b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_splits.js
index 024469d5442f..501f230e7b2f 100644
--- a/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_splits.js
+++ b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_splits.js
@@ -1,7 +1,7 @@
 import { expect } from 'chai';
 import getSplits from '../../helpers/get_splits';
 
-describe('getSplits(resp, series)', () => {
+describe('getSplits(resp, panel, series)', () => {
 
   it('should return a splits for everything/filter group bys', () => {
     const resp = {
@@ -12,6 +12,7 @@ describe('getSplits(resp, series)', () => {
         }
       }
     };
+    const panel = { type: 'timeseries' };
     const series = {
       id: 'SERIES',
       color: '#F00',
@@ -21,7 +22,7 @@ describe('getSplits(resp, series)', () => {
         { id: 'SIBAGG', type: 'avg_bucket', field: 'AVG' }
       ]
     };
-    expect(getSplits(resp, series)).to.eql([
+    expect(getSplits(resp, panel, series)).to.eql([
       {
         id: 'SERIES',
         label: 'Overall Average of Average of cpu',
@@ -32,6 +33,57 @@ describe('getSplits(resp, series)', () => {
     ]);
   });
 
+  it('should return a splits for terms group bys for top_n', () => {
+    const resp = {
+      aggregations: {
+        SERIES: {
+          buckets: [
+            {
+              key: 'example-01',
+              timeseries: { buckets: [] },
+              SIBAGG: { value: 1 }
+            },
+            {
+              key: 'example-02',
+              timeseries: { buckets: [] },
+              SIBAGG: { value: 2 }
+            }
+          ]
+        }
+      }
+    };
+    const series = {
+      id: 'SERIES',
+      color: '#F00',
+      split_mode: 'terms',
+      terms_field: 'beat.hostname',
+      terms_size: 10,
+      metrics: [
+        { id: 'AVG', type: 'avg', field: 'cpu' },
+        { id: 'SIBAGG', type: 'avg_bucket', field: 'AVG' }
+      ]
+    };
+    const panel = { type: 'top_n' };
+    expect(getSplits(resp, panel, series)).to.eql([
+      {
+        id: 'SERIES:example-01',
+        key: 'example-01',
+        label: 'example-01',
+        color: '#FF0000',
+        timeseries: { buckets: [] },
+        SIBAGG: { value: 1 }
+      },
+      {
+        id: 'SERIES:example-02',
+        key: 'example-02',
+        label: 'example-02',
+        color: '#FF0000',
+        timeseries: { buckets: [] },
+        SIBAGG: { value: 2 }
+      }
+    ]);
+  });
+
   it('should return a splits for terms group bys', () => {
     const resp = {
       aggregations: {
@@ -62,7 +114,8 @@ describe('getSplits(resp, series)', () => {
         { id: 'SIBAGG', type: 'avg_bucket', field: 'AVG' }
       ]
     };
-    expect(getSplits(resp, series)).to.eql([
+    const panel = { type: 'timeseries' };
+    expect(getSplits(resp, panel, series)).to.eql([
       {
         id: 'SERIES:example-01',
         key: 'example-01',
@@ -109,7 +162,8 @@ describe('getSplits(resp, series)', () => {
         { id: 'COUNT', type: 'count' },
       ]
     };
-    expect(getSplits(resp, series)).to.eql([
+    const panel = { type: 'timeseries' };
+    expect(getSplits(resp, panel, series)).to.eql([
       {
         id: 'SERIES:filter-1',
         key: 'filter-1',
diff --git a/src/core_plugins/metrics/server/lib/vis_data/helpers/get_splits.js b/src/core_plugins/metrics/server/lib/vis_data/helpers/get_splits.js
index 15bc59097595..dd3d2dedc917 100644
--- a/src/core_plugins/metrics/server/lib/vis_data/helpers/get_splits.js
+++ b/src/core_plugins/metrics/server/lib/vis_data/helpers/get_splits.js
@@ -4,7 +4,8 @@ import _ from 'lodash';
 import getLastMetric from './get_last_metric';
 import getSplitColors from './get_split_colors';
 import { formatKey } from './format_key';
-export default function getSplits(resp, series) {
+export default function getSplits(resp, panel, series) {
+  const color = new Color(series.color);
   const metric = getLastMetric(series);
   if (_.has(resp, `aggregations.${series.id}.buckets`)) {
     const buckets = _.get(resp, `aggregations.${series.id}.buckets`);
@@ -14,7 +15,7 @@ export default function getSplits(resp, series) {
       return buckets.map(bucket => {
         bucket.id = `${series.id}:${bucket.key}`;
         bucket.label = formatKey(bucket.key, series);
-        bucket.color = colors.shift();
+        bucket.color = panel.type === 'top_n' ? color.hex() : colors.shift();
         return bucket;
       });
     }
@@ -31,7 +32,6 @@ export default function getSplits(resp, series) {
     }
   }
 
-  const color = new Color(series.color);
   const timeseries = _.get(resp, `aggregations.${series.id}.timeseries`);
   const mergeObj = {
     timeseries
diff --git a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/percentile.js b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/percentile.js
index ead6ed5146a4..6a9e6f9e33fe 100644
--- a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/percentile.js
+++ b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/percentile.js
@@ -8,7 +8,7 @@ export default function percentile(resp, panel, series) {
     const metric = getLastMetric(series);
     if (metric.type !== 'percentile') return next(results);
 
-    getSplits(resp, series).forEach((split) => {
+    getSplits(resp, panel, series).forEach((split) => {
       metric.percentiles.forEach(percentile => {
         const label = (split.label) + ` (${percentile.value})`;
         const data = split.timeseries.buckets.map(bucket => {
diff --git a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_deviation_bands.js b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_deviation_bands.js
index dbb3a2ff5c80..bf6b7492da98 100644
--- a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_deviation_bands.js
+++ b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_deviation_bands.js
@@ -6,7 +6,7 @@ export default function stdDeviationBands(resp, panel, series) {
   return next => results => {
     const metric = getLastMetric(series);
     if (metric.type === 'std_deviation' && metric.mode === 'band') {
-      getSplits(resp, series).forEach((split) => {
+      getSplits(resp, panel, series).forEach((split) => {
         const upper = split.timeseries.buckets.map(mapBucket(_.assign({}, metric, { mode: 'upper' })));
         const lower = split.timeseries.buckets.map(mapBucket(_.assign({}, metric, { mode: 'lower' })));
         results.push({
diff --git a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_deviation_sibling.js b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_deviation_sibling.js
index 401fd266d6fa..60f2b810e3df 100644
--- a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_deviation_sibling.js
+++ b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_deviation_sibling.js
@@ -6,7 +6,7 @@ export default function stdDeviationSibling(resp, panel, series) {
   return next => results => {
     const metric = getLastMetric(series);
     if (metric.mode === 'band' && metric.type === 'std_deviation_bucket') {
-      getSplits(resp, series).forEach((split) => {
+      getSplits(resp, panel, series).forEach((split) => {
 
         const mapBucketByMode = (mode) => {
           return bucket => {
diff --git a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_metric.js b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_metric.js
index 862222162378..ecd1e999e69a 100644
--- a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_metric.js
+++ b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_metric.js
@@ -13,7 +13,7 @@ export default function stdMetric(resp, panel, series) {
     }
     if (/_bucket$/.test(metric.type)) return next(results);
     const decoration = getDefaultDecoration(series);
-    getSplits(resp, series).forEach((split) => {
+    getSplits(resp, panel, series).forEach((split) => {
       const data = split.timeseries.buckets.map(mapBucket(metric));
       results.push({
         id: `${split.id}`,
diff --git a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_sibling.js b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_sibling.js
index 61b9f4ae8be0..7cda5f1e1020 100644
--- a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_sibling.js
+++ b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_sibling.js
@@ -10,7 +10,7 @@ export default function stdSibling(resp, panel, series) {
     if (metric.type === 'std_deviation_bucket' && metric.mode === 'band') return next(results);
 
     const decoration = getDefaultDecoration(series);
-    getSplits(resp, series).forEach((split) => {
+    getSplits(resp, panel, series).forEach((split) => {
       const data = split.timeseries.buckets.map(bucket => {
         return [bucket.key, getSiblingAggValue(split, metric)];
       });