diff --git a/src/core_plugins/metrics/common/__tests__/calculate_label.js b/src/core_plugins/metrics/common/__tests__/calculate_label.js
index 10414c15de61e..bb1ce3ebd38d0 100644
--- a/src/core_plugins/metrics/common/__tests__/calculate_label.js
+++ b/src/core_plugins/metrics/common/__tests__/calculate_label.js
@@ -38,6 +38,16 @@ describe('calculateLabel(metric, metrics)', () => {
     expect(label).to.equal('Derivative of Max of network.out.bytes');
   });
 
+  it('returns formated label for derivative of percentile', () => {
+    const metric = { id: 2, type: 'derivative', field: '1[50.0]' };
+    const metrics = [
+      { id: 1, type: 'percentile', field: 'network.out.bytes' },
+      metric
+    ];
+    const label = calculateLabel(metric, metrics);
+    expect(label).to.equal('Derivative of Percentile of network.out.bytes (50.0)');
+  });
+
   it('returns formated label for pipeline aggs (deep)', () => {
     const metric = { id: 3, type: 'derivative', field: 2 };
     const metrics = [
diff --git a/src/core_plugins/metrics/common/calculate_label.js b/src/core_plugins/metrics/common/calculate_label.js
index 21d4d51191edf..c3f044bbfec27 100644
--- a/src/core_plugins/metrics/common/calculate_label.js
+++ b/src/core_plugins/metrics/common/calculate_label.js
@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import { includes, startsWith } from 'lodash';
 import lookup from './agg_lookup';
 const paths = [
   'cumulative_sum',
@@ -28,10 +28,22 @@ export default function calculateLabel(metric, metrics) {
     return `${lookup[metric.type]} (${metric.value}) of ${metric.field}`;
   }
 
-  if (_.includes(paths, metric.type)) {
-    const targetMetric = _.find(metrics, { id: metric.field });
+
+  if (includes(paths, metric.type)) {
+    let additionalLabel = '';
+    const targetMetric = metrics.find(m => startsWith(metric.field, m.id));
     const targetLabel = calculateLabel(targetMetric, metrics);
-    return `${lookup[metric.type]} of ${targetLabel}`;
+    // For percentiles we need to parse the field id to extract the percentile
+    // the user configured in the percentile aggregation and specified in the
+    // submetric they selected. This applies only to pipeline aggs.
+    if (targetMetric && targetMetric.type === 'percentile') {
+      const percentileValueMatch = /\[([0-9\.]+)\]$/;
+      const matches = metric.field.match(percentileValueMatch);
+      if (matches) {
+        additionalLabel += ` (${matches[1]})`;
+      }
+    }
+    return `${lookup[metric.type]} of ${targetLabel}${additionalLabel}`;
   }
 
   return `${lookup[metric.type]} of ${metric.field}`;
diff --git a/src/core_plugins/metrics/public/components/aggs/metric_select.js b/src/core_plugins/metrics/public/components/aggs/metric_select.js
index 8da3bbc9ad4b7..15c34e6fe6c3e 100644
--- a/src/core_plugins/metrics/public/components/aggs/metric_select.js
+++ b/src/core_plugins/metrics/public/components/aggs/metric_select.js
@@ -18,6 +18,14 @@ function createTypeFilter(restrict, exclude) {
   };
 }
 
+
+// This filters out sibling aggs, percentiles, and special aggs (like Series Agg)
+export function filterRows(row) {
+  return  !/_bucket$/.test(row.type)
+    && !/^series/.test(row.type)
+    && !/^percentile/.test(row.type);
+}
+
 function MetricSelect(props) {
   const {
     restrict,
@@ -30,8 +38,27 @@ function MetricSelect(props) {
   const metrics = props.metrics
     .filter(createTypeFilter(restrict, exclude));
 
-  const options = calculateSiblings(metrics, metric)
-    .filter(row => !/_bucket$/.test(row.type) && !/^series/.test(row.type))
+  const siblings = calculateSiblings(metrics, metric);
+
+  // Percentiles need to be handled differently because one percentile aggregation
+  // could have multiple percentiles associated with it. So the user needs a way
+  // to specify which percentile the want to use.
+  const percentileOptions = siblings
+    .filter(row => /^percentile/.test(row.type))
+    .reduce((acc, row) => {
+      const label = calculateLabel(row, metrics);
+      row.percentiles.forEach(p => {
+        if (p.value) {
+          const value = /\./.test(p.value) ? p.value : `${p.value}.0`;
+          acc.push({ value: `${row.id}[${value}]`, label: `${label} (${value})` });
+        }
+      });
+      return acc;
+    }, []);
+
+
+  const options = siblings
+    .filter(filterRows)
     .map(row => {
       const label = calculateLabel(row, metrics);
       return { value: row.id, label };
@@ -41,7 +68,7 @@ function MetricSelect(props) {
     <Select
       aria-label="Select metric"
       placeholder="Select metric..."
-      options={options.concat(props.additionalOptions)}
+      options={[ ...options, ...props.additionalOptions, ...percentileOptions]}
       value={value}
       onChange={onChange}
     />
diff --git a/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_buckets_path.js b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_buckets_path.js
index fb9104e0e20d1..791713a5d046d 100644
--- a/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_buckets_path.js
+++ b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_buckets_path.js
@@ -5,8 +5,11 @@ describe('getBucketsPath', () => {
 
   const metrics = [
     { id: 1, type: 'derivative' },
-    { id: 2, type: 'percentile', percent: '50' },
-    { id: 3, type: 'percentile', percent: '20.0' },
+    { id: 2, type: 'percentile', percentiles: [{ value: '50' }] },
+    { id: 3, type: 'percentile', percentiles: [
+      { value: '20.0' },
+      { value: '10.0' }
+    ] },
     { id: 4, type: 'std_deviation', mode: 'raw' },
     { id: 5, type: 'std_deviation', mode: 'upper' },
     { id: 6, type: 'std_deviation', mode: 'lower' },
@@ -27,6 +30,10 @@ describe('getBucketsPath', () => {
     expect(getBucketsPath(3, metrics)).to.equal('3[20.0]');
   });
 
+  it('return path for percentile(10.0) with alt id', () => {
+    expect(getBucketsPath('3[10.0]', metrics)).to.equal('3[10.0]');
+  });
+
   it('return path for std_deviation(raw)', () => {
     expect(getBucketsPath(4, metrics)).to.equal('4[std_deviation]');
   });
diff --git a/src/core_plugins/metrics/server/lib/vis_data/helpers/get_buckets_path.js b/src/core_plugins/metrics/server/lib/vis_data/helpers/get_buckets_path.js
index 0430850a498ea..4d5b2d8e01586 100644
--- a/src/core_plugins/metrics/server/lib/vis_data/helpers/get_buckets_path.js
+++ b/src/core_plugins/metrics/server/lib/vis_data/helpers/get_buckets_path.js
@@ -1,14 +1,21 @@
-import _ from 'lodash';
+import { startsWith } from 'lodash';
+const percentileTest = /\[[0-9\.]+\]$/;
+const percentileNumberTest = /\d+\.\d+/;
 export default (id, metrics) => {
-  const metric = _.find(metrics, { id });
+  const metric = metrics.find(m => startsWith(id, m.id));
   let bucketsPath = String(id);
 
   switch (metric.type) {
     case 'derivative':
       bucketsPath += '[normalized_value]';
       break;
+    // For percentiles we need to breakout the percentile key that the user
+    // specified. This information is stored in the key using the following pattern
+    // {metric.id}[{percentile}]
     case 'percentile':
-      const percentileKey = /\./.test(`${metric.percent}`) ? `${metric.percent}` : `${metric.percent}.0`;
+      if (percentileTest.test(bucketsPath)) break;
+      const percent = metric.percentiles[0];
+      const percentileKey = percentileNumberTest.test(`${percent.value}`) ? `${percent.value}` : `${percent.value}.0`;
       bucketsPath += `[${percentileKey}]`;
       break;
     case 'percentile_rank':