diff --git a/x-pack/plugins/ml/public/explorer/explorer.html b/x-pack/plugins/ml/public/explorer/explorer.html
index 857a3755a7771..d94296e3ad6a4 100644
--- a/x-pack/plugins/ml/public/explorer/explorer.html
+++ b/x-pack/plugins/ml/public/explorer/explorer.html
@@ -131,6 +131,8 @@ <h4 class="euiTitle euiTitle--small">No {{swimlaneViewByFieldName}} influencers
           </div>
         </div>
 
+        <div class="euiSpacer euiSpacer--m"></div>
+
         <div class="euiText explorer-charts">
           <ml-explorer-charts-container />
         </div>
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/__snapshots__/explorer_charts_container.test.js.snap b/x-pack/plugins/ml/public/explorer/explorer_charts/__snapshots__/explorer_charts_container.test.js.snap
deleted file mode 100644
index 087558cfa4ed4..0000000000000
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/__snapshots__/explorer_charts_container.test.js.snap
+++ /dev/null
@@ -1,54 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ExplorerChartsContainer Initialization with chart data 1`] = `
-<div
-  className="explorer-chart-label"
->
-  <div
-    className="explorer-chart-label-fields"
-  >
-    <span>
-      high_sum(nginx.access.body_sent.bytes) over nginx.access.remote_ip (population-03)
-       - 
-    </span>
-    <span
-      key="0"
-    >
-      nginx.access.remote_ip
-       
-      72.57.0.53
-    </span>
-  </div>
-  <EuiIconTip
-    aria-label="Info"
-    content={
-      <ExplorerChartTooltip
-        aggregationInterval="1h"
-        chartFunction="sum nginx.access.body_sent.bytes"
-        entityFields={
-          Array [
-            Object {
-              "fieldName": "nginx.access.remote_ip",
-              "fieldValue": "72.57.0.53",
-            },
-          ]
-        }
-        jobId="population-03"
-      />
-    }
-    position="left"
-    size="s"
-    type="questionInCircle"
-  />
-  <a
-    className="euiLink"
-    onClick={[Function]}
-  >
-    View 
-    <i
-      aria-hidden="true"
-      className="fa fa-external-link"
-    />
-  </a>
-</div>
-`;
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label.test.js.snap b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label.test.js.snap
new file mode 100644
index 0000000000000..0654b24dcf60a
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label.test.js.snap
@@ -0,0 +1,120 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ExplorerChartLabelBadge Render the chart label in one line. 1`] = `
+<React.Fragment>
+  <span
+    className="ml-explorer-chart-label"
+  >
+    <span
+      className="ml-explorer-chart-label-detector"
+    >
+      high_sum(nginx.access.body_sent.bytes) over nginx.access.remote_ip (population-03)
+      <React.Fragment>
+         – 
+      </React.Fragment>
+    </span>
+    <React.Fragment>
+      <React.Fragment
+        key="nginx.access.remote_ip 72.57.0.53"
+      >
+        <ExplorerChartLabelBadge
+          entity={
+            Object {
+              "$$hashKey": "object:813",
+              "fieldName": "nginx.access.remote_ip",
+              "fieldValue": "72.57.0.53",
+            }
+          }
+        />
+         
+      </React.Fragment>
+       
+      <span
+        className="ml-explorer-chart-info-icon"
+      >
+        <EuiIconTip
+          aria-label="Info"
+          content={
+            <ExplorerChartTooltip
+              aggregationInterval="1h"
+              chartFunction="sum nginx.access.body_sent.bytes"
+              entityFields={
+                Array [
+                  Object {
+                    "fieldName": "nginx.access.remote_ip",
+                    "fieldValue": "72.57.0.53",
+                  },
+                ]
+              }
+              jobId="population-03"
+            />
+          }
+          position="top"
+          size="s"
+          type="questionInCircle"
+        />
+      </span>
+    </React.Fragment>
+  </span>
+</React.Fragment>
+`;
+
+exports[`ExplorerChartLabelBadge Render the chart label in two lines. 1`] = `
+<React.Fragment>
+  <span
+    className="ml-explorer-chart-label"
+  >
+    <span
+      className="ml-explorer-chart-label-detector"
+    >
+      high_sum(nginx.access.body_sent.bytes) over nginx.access.remote_ip (population-03)
+      <React.Fragment>
+         
+      </React.Fragment>
+    </span>
+    <span
+      className="ml-explorer-chart-info-icon"
+    >
+      <EuiIconTip
+        aria-label="Info"
+        content={
+          <ExplorerChartTooltip
+            aggregationInterval="1h"
+            chartFunction="sum nginx.access.body_sent.bytes"
+            entityFields={
+              Array [
+                Object {
+                  "fieldName": "nginx.access.remote_ip",
+                  "fieldValue": "72.57.0.53",
+                },
+              ]
+            }
+            jobId="population-03"
+          />
+        }
+        position="top"
+        size="s"
+        type="questionInCircle"
+      />
+    </span>
+  </span>
+  <div
+    className="ml-explorer-chart-label-fields"
+  >
+    <React.Fragment
+      key="nginx.access.remote_ip 72.57.0.53"
+    >
+      <ExplorerChartLabelBadge
+        entity={
+          Object {
+            "$$hashKey": "object:813",
+            "fieldName": "nginx.access.remote_ip",
+            "fieldValue": "72.57.0.53",
+          }
+        }
+      />
+       
+    </React.Fragment>
+  </div>
+</React.Fragment>
+`;
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label_badge.test.js.snap b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label_badge.test.js.snap
new file mode 100644
index 0000000000000..9853aaa7907d9
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label_badge.test.js.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ExplorerChartLabelBadge Render entity label badge. 1`] = `
+<span
+  className="ml-explorer-chart-label-badge"
+>
+  <EuiBadge
+    color="hollow"
+    iconSide="left"
+  >
+    nginx.access.remote_ip
+     
+    <strong>
+      72.57.0.53
+    </strong>
+  </EuiBadge>
+</span>
+`;
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js
new file mode 100644
index 0000000000000..218f270f806c5
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js
@@ -0,0 +1,75 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import './styles/explorer_chart_label.less';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {
+  EuiIconTip
+} from '@elastic/eui';
+
+import { ExplorerChartLabelBadge } from './explorer_chart_label_badge';
+import { ExplorerChartTooltip } from '../../explorer_chart_tooltip';
+
+export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, wrapLabel = false }) {
+  // Depending on whether we wrap the entityField badges to a new line, we render this differently:
+  //
+  // 1. All in one line:
+  //   <detectorLabel> - <entityBadge1> <entityBadge2> ... <infoIcon>
+  //
+  // 2. Multiple lines:
+  //   <detectorLabel> <infoIcon>
+  //   <entityBadge1> <entityBadge2> ...
+
+  // Using &nbsp;s here to make sure those spaces get rendered.
+  const labelSeparator = (
+    wrapLabel === true ||
+    (entityFields.length === 0 || detectorLabel.length === 0)
+  ) ? (<React.Fragment>&nbsp;</React.Fragment>) : (<React.Fragment>&nbsp;&ndash;&nbsp;</React.Fragment>);
+
+  const entityFieldBadges = entityFields.map((entity) => {
+    return (
+      <React.Fragment key={`${entity.fieldName} ${entity.fieldValue}`}>
+        <ExplorerChartLabelBadge entity={entity} />&nbsp;
+      </React.Fragment>
+    );
+  });
+
+  const infoIcon = (
+    <span className="ml-explorer-chart-info-icon">
+      <EuiIconTip
+        content={<ExplorerChartTooltip {...infoTooltip} />}
+        position="top"
+        size="s"
+      />
+    </span>
+  );
+
+  return (
+    <React.Fragment>
+      <span className="ml-explorer-chart-label">
+        <span className="ml-explorer-chart-label-detector">
+          {detectorLabel}{labelSeparator}
+        </span>
+        {wrapLabel && infoIcon}
+        {!wrapLabel && (
+          <React.Fragment>{entityFieldBadges} {infoIcon}</React.Fragment>
+        )}
+      </span>
+      {wrapLabel && (
+        <div className="ml-explorer-chart-label-fields">{entityFieldBadges}</div>
+      )}
+    </React.Fragment>
+  );
+}
+ExplorerChartLabel.propTypes = {
+  detectorLabel: PropTypes.string.isRequired,
+  entityFields: PropTypes.arrayOf(ExplorerChartLabelBadge.propTypes.entity),
+  infoTooltip: PropTypes.object.isRequired,
+  wrapLabel: PropTypes.bool
+};
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.test.js b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.test.js
new file mode 100644
index 0000000000000..f0ff2b53a3c18
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.test.js
@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import seriesConfig from '../../__mocks__/mock_series_config_filebeat.json';
+
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import { ExplorerChartLabel } from './explorer_chart_label';
+
+
+describe('ExplorerChartLabelBadge', () => {
+
+  test('Render the chart label in one line.', () => {
+
+    const wrapper = shallow(
+      <ExplorerChartLabel
+        detectorLabel={seriesConfig.detectorLabel}
+        entityFields={seriesConfig.entityFields}
+        infoTooltip={seriesConfig.infoTooltip}
+        wrapLabel={false}
+      />
+    );
+    expect(wrapper).toMatchSnapshot();
+
+  });
+
+  test('Render the chart label in two lines.', () => {
+
+    const wrapper = shallow(
+      <ExplorerChartLabel
+        detectorLabel={seriesConfig.detectorLabel}
+        entityFields={seriesConfig.entityFields}
+        infoTooltip={seriesConfig.infoTooltip}
+        wrapLabel={true}
+      />
+    );
+    expect(wrapper).toMatchSnapshot();
+
+  });
+
+});
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.js b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.js
new file mode 100644
index 0000000000000..6a0d34991d895
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.js
@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import './styles/explorer_chart_label_badge.less';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {
+  EuiBadge
+} from '@elastic/eui';
+
+export function ExplorerChartLabelBadge({ entity }) {
+  return (
+    <span className="ml-explorer-chart-label-badge">
+      <EuiBadge color="hollow">
+        {entity.fieldName} <strong>{entity.fieldValue}</strong>
+      </EuiBadge>
+    </span>
+  );
+}
+ExplorerChartLabelBadge.propTypes = {
+  entity: PropTypes.shape({
+    fieldName: PropTypes.string.isRequired,
+    fieldValue: PropTypes.string.isRequired
+  })
+};
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.test.js b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.test.js
new file mode 100644
index 0000000000000..e1f84d625c224
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.test.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import seriesConfig from '../../__mocks__/mock_series_config_filebeat.json';
+
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import { ExplorerChartLabelBadge } from './explorer_chart_label_badge';
+
+
+describe('ExplorerChartLabelBadge', () => {
+
+  test('Render entity label badge.', () => {
+
+    const wrapper = shallow(<ExplorerChartLabelBadge entity={seriesConfig.entityFields[0]} />);
+    expect(wrapper).toMatchSnapshot();
+
+  });
+
+});
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/index.js b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/index.js
new file mode 100644
index 0000000000000..0cfc2b8463ef8
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/index.js
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './explorer_chart_label';
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label.less b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label.less
new file mode 100644
index 0000000000000..c9065f9404f0e
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label.less
@@ -0,0 +1,33 @@
+.ml-explorer-chart-label {
+  font-weight: normal;
+  /* account 80px for the "View" link and potential alert icon */
+  max-width: calc(~"100% - 80px");
+  overflow: hidden;
+}
+
+.ml-explorer-chart-label-detector {
+  vertical-align: middle;
+  /* account 100px for the "View" link and info icon */
+  max-width: calc(~"100% - 100px");
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
+}
+
+.ml-explorer-chart-info-icon {
+  margin: 0;
+  vertical-align: middle;
+  display: inline-block;
+}
+
+/* only used when the field badges get wrapped to a new line */
+.ml-explorer-chart-label-fields {
+  width: 100%;
+  /* use a fixed height to avoid layout issues when
+     only some charts don't have entity fields */
+  height: 22px;
+  overflow: hidden;
+  white-space: nowrap;
+  line-height: 0;
+}
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label_badge.less b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label_badge.less
new file mode 100644
index 0000000000000..69b13432f05c9
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label_badge.less
@@ -0,0 +1,10 @@
+/* 
+  Resets the badge's default strong font-weight so it's possible
+  to put custom emphasis inside the badge only on a part of it.
+  Used in the Explorer Chart label badge to display an entity's
+  field_name as `normal` and field_value as `strong`.
+*/
+.ml-explorer-chart-label-badge {
+  font-weight: normal;
+  vertical-align: middle;
+}
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart.js b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart.js
index 8687579d9349e..6f1950e8c09c3 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart.js
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart.js
@@ -36,6 +36,7 @@ import { mlFieldFormatService } from '../../services/field_format_service';
 import { mlChartTooltipService } from '../../components/chart_tooltip/chart_tooltip_service';
 
 const CONTENT_WRAPPER_HEIGHT = 215;
+const CONTENT_WRAPPER_CLASS = 'ml-explorer-chart-content-wrapper';
 
 export class ExplorerChart extends React.Component {
   static propTypes = {
@@ -92,13 +93,14 @@ export class ExplorerChart extends React.Component {
 
       // Clear any existing elements from the visualization,
       // then build the svg elements for the chart.
-      const chartElement = d3.select(element).select('.content-wrapper');
+      const chartElement = d3.select(element).select(`.${CONTENT_WRAPPER_CLASS}`);
       chartElement.select('svg').remove();
 
       const svgWidth = $el.width();
       const svgHeight = chartHeight + margin.top + margin.bottom;
 
       const svg = chartElement.append('svg')
+        .classed('ml-explorer-chart-svg', true)
         .attr('width', svgWidth)
         .attr('height', svgHeight);
 
@@ -382,7 +384,7 @@ export class ExplorerChart extends React.Component {
           <LoadingIndicator height={CONTENT_WRAPPER_HEIGHT} />
         )}
         {!isLoading && (
-          <div className="content-wrapper" />
+          <div className={CONTENT_WRAPPER_CLASS} />
         )}
       </div>
     );
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container.js b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container.js
index 03ff283f2bbe9..9a3e61d03f3f7 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container.js
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container.js
@@ -7,11 +7,22 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import { EuiIconTip } from '@elastic/eui';
+import {
+  EuiButtonEmpty,
+  EuiIconTip,
+  EuiToolTip
+} from '@elastic/eui';
 
-import { getExploreSeriesLink } from '../../util/chart_utils';
+import {
+  getExploreSeriesLink,
+  isLabelLengthAboveThreshold
+} from '../../util/chart_utils';
 import { ExplorerChart } from './explorer_chart';
-import { ExplorerChartTooltip } from './explorer_chart_tooltip';
+import { ExplorerChartLabel } from './components/explorer_chart_label';
+
+const textTooManyBuckets = `This selection contains too many buckets to be displayed.
+ The dashboard is best viewed over a shorter time range.`;
+const textViewButton = 'Open in Single Metric Viewer';
 
 export function ExplorerChartsContainer({
   seriesToPlot,
@@ -19,6 +30,8 @@ export function ExplorerChartsContainer({
   tooManyBuckets,
   mlSelectSeverityService
 }) {
+  const wrapLabel = seriesToPlot.some((series) => isLabelLengthAboveThreshold(series));
+
   return (
     <div className="explorer-charts">
       {(seriesToPlot.length > 0) &&
@@ -35,35 +48,38 @@ export function ExplorerChartsContainer({
 
           return (
             <div className={`ml-explorer-chart-container col-md-${layoutCellsPerChart}`} key={id}>
-              <div className="explorer-chart-label">
-                <div className="explorer-chart-label-fields">
-                  {(detectorLabel.length > 0 && entityFields.length > 0) && (
-                    <span>{detectorLabel} - </span>
-                  )}
-                  {(detectorLabel.length > 0 && entityFields.length === 0) && (
-                    <span>{detectorLabel}</span>
-                  )}
-                  {entityFields.map((entity, j) => {
-                    return (
-                      <span key={j}>{entity.fieldName} {entity.fieldValue}</span>
-                    );
-                  })}
-                </div>
-                <EuiIconTip content={<ExplorerChartTooltip {...series.infoTooltip} />} position="left" size="s" />
+              <div className="ml-explorer-chart-icons">
                 {tooManyBuckets && (
-                  <EuiIconTip
-                    content={'This selection contains too many buckets to be displayed.' +
-                     'The dashboard is best viewed over a shorter time range.'}
-                    position="bottom"
-                    size="s"
-                    type="alert"
-                    color="warning"
-                  />
+                  <span className="ml-explorer-chart-icon">
+                    <EuiIconTip
+                      content={textTooManyBuckets}
+                      position="top"
+                      size="s"
+                      type="alert"
+                      color="warning"
+                    />
+                  </span>
                 )}
-                <a className="euiLink" onClick={() => window.open(getExploreSeriesLink(series), '_blank')}>
-                  View <i className="fa fa-external-link" aria-hidden="true" />
-                </a>
+                <EuiToolTip
+                  position="top"
+                  content={textViewButton}
+                >
+                  <EuiButtonEmpty
+                    iconSide="right"
+                    iconType="popout"
+                    size="xs"
+                    onClick={() => getExploreSeriesLink(series)}
+                  >
+                    View
+                  </EuiButtonEmpty>
+                </EuiToolTip>
               </div>
+              <ExplorerChartLabel
+                detectorLabel={detectorLabel}
+                entityFields={entityFields}
+                infoTooltip={series.infoTooltip}
+                wrapLabel={wrapLabel}
+              />
               <ExplorerChart
                 tooManyBuckets={tooManyBuckets}
                 seriesConfig={series}
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container.test.js b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container.test.js
index 073cee8632ebd..b8e81abb07df0 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container.test.js
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container.test.js
@@ -22,6 +22,39 @@ jest.mock('../../services/field_format_service', () => ({
   }
 }));
 
+// The mocks for ui/chrome and ui/timefilter are copied from charts_utils.test.js
+// TODO: Refactor the involved tests to avoid this duplication
+jest.mock('ui/chrome',
+  () => ({
+    getBasePath: () => {
+      return '<basepath>';
+    },
+    getUiSettingsClient: () => {
+      return {
+        get: (key) => {
+          switch (key) {
+            case 'timepicker:timeDefaults':
+              return { from: 'now-15m', to: 'now', mode: 'quick' };
+            case 'timepicker:refreshIntervalDefaults':
+              return { pause: false, value: 0 };
+            default:
+              throw new Error(`Unexpected config key: ${key}`);
+          }
+        }
+      };
+    },
+  }), { virtual: true });
+
+import moment from 'moment';
+import { timefilter } from 'ui/timefilter';
+
+timefilter.enableTimeRangeSelector();
+timefilter.enableAutoRefreshSelector();
+timefilter.setTime({
+  from: moment(seriesConfig.selectedEarliest).toISOString(),
+  to: moment(seriesConfig.selectedLatest).toISOString()
+});
+
 import { shallow } from 'enzyme';
 import React from 'react';
 
@@ -69,8 +102,8 @@ describe('ExplorerChartsContainer', () => {
       mlChartTooltipService={mlChartTooltipService}
     />);
 
-    // Only do a snapshot of the label section, the included
-    // ExplorerChart component does that in its own tests anyway.
-    expect(wrapper.find('.explorer-chart-label')).toMatchSnapshot();
+    // We test child components with snapshots separately
+    // so we just do some high level sanity check here.
+    expect(wrapper.find('.ml-explorer-chart-container').children()).toHaveLength(3);
   });
 });
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_chart.less b/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_chart.less
index de8e351685f7e..267cebc9a6e2f 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_chart.less
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_chart.less
@@ -3,7 +3,7 @@ ml-explorer-chart,
   display: block;
   padding-bottom: 10px;
 
-  svg {
+  .ml-explorer-chart-svg {
     font-size: 12px;
     font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial;
 
@@ -106,3 +106,7 @@ ml-explorer-chart,
     stroke-opacity: 0.65;
   }
 }
+
+.ml-explorer-chart-content-wrapper {
+  height: 215px;
+}
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_charts_container.less b/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_charts_container.less
index 9d1f205f9b224..04a55fb0bc316 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_charts_container.less
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_charts_container.less
@@ -99,36 +99,13 @@
 
     }
 
-    .ml-explorer-chart-container {
-      .explorer-chart-label {
-        display: block;
-        font-size: 13px;
-        font-weight: normal;
-
-        .explorer-chart-label-fields {
-          vertical-align: top;
-          /* account 80px for the "View" link */
-          max-width: calc(~"100% - 80px");
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-          display: inline-block;
-        }
-
-        .euiIcon {
-          vertical-align: top;
-          margin: 4px 0 0 4px;
-        }
-
-        a {
-          float:right;
-          padding-left: 5px;
-        }
-      }
-
-      .content-wrapper {
-        height: 215px;
-      }
-    }
   }
 }
+
+/* wrapper class for the top right alert icon and view button */
+.ml-explorer-chart-icons {
+  float:right;
+  padding-left: 5px;
+  /* counter-margin for EuiButtonEmpty's padding */
+  margin: 2px -8px 0 0;
+}
diff --git a/x-pack/plugins/ml/public/util/chart_utils.js b/x-pack/plugins/ml/public/util/chart_utils.js
index df0a1121ee7a9..0031cd5c74a7c 100644
--- a/x-pack/plugins/ml/public/util/chart_utils.js
+++ b/x-pack/plugins/ml/public/util/chart_utils.js
@@ -228,6 +228,15 @@ export function getTickValues(startTimeMs, tickInterval, earliest, latest) {
   return tickValues;
 }
 
+const LABEL_WRAP_THRESHOLD = 60;
+
+// Checks if the string length of a chart label (detector description
+// and entity fields) is above LABEL_WRAP_THRESHOLD.
+export function isLabelLengthAboveThreshold({ detectorLabel, entityFields }) {
+  const labelLength = (detectorLabel.length + entityFields.map(d => `${d.fieldName} ${d.fieldValue}`).join(' ').length);
+  return (labelLength > LABEL_WRAP_THRESHOLD);
+}
+
 // To get xTransform it would be nicer to use d3.transform, but that doesn't play well with JSDOM.
 // So this uses a regex variant because we definitely want test coverage for the label removal.
 // Once JSDOM supports SVGAnimatedTransformList we can use this simpler inline version:
diff --git a/x-pack/plugins/ml/public/util/chart_utils.test.js b/x-pack/plugins/ml/public/util/chart_utils.test.js
index d44cc933d0ad2..88ae5551f8797 100644
--- a/x-pack/plugins/ml/public/util/chart_utils.test.js
+++ b/x-pack/plugins/ml/public/util/chart_utils.test.js
@@ -6,6 +6,9 @@
 
 import seriesConfig from '../explorer/explorer_charts/__mocks__/mock_series_config_filebeat';
 
+// A copy of these mocks for ui/chrome and ui/timefilter are also
+// used in explorer_charts_container.test.js.
+// TODO: Refactor the involved tests to avoid this duplication
 jest.mock('ui/chrome',
   () => ({
     getBasePath: () => {
@@ -47,6 +50,7 @@ import { timefilter } from 'ui/timefilter';
 import {
   getExploreSeriesLink,
   getTickValues,
+  isLabelLengthAboveThreshold,
   getXTransform,
   removeLabelOverlap
 } from './chart_utils';
@@ -134,6 +138,23 @@ describe('getTickValues', () => {
   });
 });
 
+describe('isLabelLengthAboveThreshold', () => {
+
+  test('short label', () => {
+    const isLongLabel = isLabelLengthAboveThreshold({
+      detectorLabel: 'count',
+      entityFields: seriesConfig.entityFields
+    });
+    expect(isLongLabel).toBeFalsy();
+  });
+
+  test('long label', () => {
+    const isLongLabel = isLabelLengthAboveThreshold(seriesConfig);
+    expect(isLongLabel).toBeTruthy();
+  });
+
+});
+
 describe('getXTransform', () => {
   const expectedXTransform = 0.007167499999999999;