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
index 218f270f806c5..d1632e235d936 100644
--- 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
@@ -4,8 +4,6 @@
  * 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';
 
@@ -62,7 +60,7 @@ export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, w
         )}
       </span>
       {wrapLabel && (
-        <div className="ml-explorer-chart-label-fields">{entityFieldBadges}</div>
+        <div>{entityFieldBadges}</div>
       )}
     </React.Fragment>
   );
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
index 6a0d34991d895..133005c2226f4 100644
--- 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
@@ -16,7 +16,7 @@ import {
 export function ExplorerChartLabelBadge({ entity }) {
   return (
     <span className="ml-explorer-chart-label-badge">
-      <EuiBadge color="hollow">
+      <EuiBadge color="hollow" className="ml-reset-font-weight">
         {entity.fieldName} <strong>{entity.fieldValue}</strong>
       </EuiBadge>
     </span>
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
deleted file mode 100644
index c9065f9404f0e..0000000000000
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label.less
+++ /dev/null
@@ -1,33 +0,0 @@
-.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
index 69b13432f05c9..80a8faa3af65e 100644
--- 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
@@ -4,7 +4,6 @@
   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 {
+.ml-reset-font-weight {
   font-weight: normal;
-  vertical-align: middle;
 }
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 c2c98a19a461a..8a91e405dc3fe 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
@@ -10,6 +10,7 @@ import React from 'react';
 import {
   EuiButtonEmpty,
   EuiFlexGrid,
+  EuiFlexGroup,
   EuiFlexItem,
   EuiIconTip,
   EuiToolTip
@@ -54,40 +55,45 @@ function ExplorerChartContainer({
   } = series;
 
   return (
-    // Needs to be a div, Using React.Fragment would break the Flex Layout
-    <div>
-      <div className="ml-explorer-chart-icons">
-        {tooManyBuckets && (
-          <span className="ml-explorer-chart-icon">
-            <EuiIconTip
-              content={textTooManyBuckets}
+    <React.Fragment>
+      <EuiFlexGroup justifyContent="spaceBetween">
+        <EuiFlexItem grow={false}>
+          <ExplorerChartLabel
+            detectorLabel={detectorLabel}
+            entityFields={entityFields}
+            infoTooltip={series.infoTooltip}
+            wrapLabel={wrapLabel}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <div className="ml-explorer-chart-icons">
+            {tooManyBuckets && (
+              <span className="ml-explorer-chart-icon">
+                <EuiIconTip
+                  content={textTooManyBuckets}
+                  position="top"
+                  size="s"
+                  type="alert"
+                  color="warning"
+                />
+              </span>
+            )}
+            <EuiToolTip
               position="top"
-              size="s"
-              type="alert"
-              color="warning"
-            />
-          </span>
-        )}
-        <EuiToolTip
-          position="top"
-          content={textViewButton}
-        >
-          <EuiButtonEmpty
-            iconSide="right"
-            iconType="popout"
-            size="xs"
-            onClick={() => window.open(getExploreSeriesLink(series), '_blank')}
-          >
-            View
-          </EuiButtonEmpty>
-        </EuiToolTip>
-      </div>
-      <ExplorerChartLabel
-        detectorLabel={detectorLabel}
-        entityFields={entityFields}
-        infoTooltip={series.infoTooltip}
-        wrapLabel={wrapLabel}
-      />
+              content={textViewButton}
+            >
+              <EuiButtonEmpty
+                iconSide="right"
+                iconType="popout"
+                size="xs"
+                onClick={() => window.open(getExploreSeriesLink(series), '_blank')}
+              >
+                View
+              </EuiButtonEmpty>
+            </EuiToolTip>
+          </div>
+        </EuiFlexItem>
+      </EuiFlexGroup>
       {(() => {
         if (functionDescription === 'rare') {
           return (
@@ -98,7 +104,7 @@ function ExplorerChartContainer({
             />
           );
         }
-        if (functionDescription === 'count') {
+        if (functionDescription === 'count' && series.entityFields.find(f => f.fieldType === 'over')) {
           return (
             <ExplorerChartRare
               tooManyBuckets={tooManyBuckets}
@@ -115,7 +121,7 @@ function ExplorerChartContainer({
           />
         );
       })()}
-    </div>
+    </React.Fragment>
   );
 }
 
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 04a55fb0bc316..36f23bff87bf4 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
@@ -104,7 +104,6 @@
 
 /* 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;