diff --git a/ui/components/charts/BarChart.tsx b/ui/components/charts/BarChart.tsx
index b96c8e2..d499e33 100644
--- a/ui/components/charts/BarChart.tsx
+++ b/ui/components/charts/BarChart.tsx
@@ -25,6 +25,7 @@ interface Props {
 
 interface State {
   series: MakeOptional<BarSeriesType, 'type'>[];
+  total: number;
 }
 
 export class BarChart extends React.Component<Props, State> {
@@ -43,6 +44,7 @@ export class BarChart extends React.Component<Props, State> {
         stack: d.stack,
         ...(d.color ? { color: d.color } : {}),
       })),
+      total: props.data.reduce((accX, itemX) => accX + itemX.data.reduce((accY, itemY) => accY + itemY, 0), 0),
     };
   }
 
@@ -53,7 +55,9 @@ export class BarChart extends React.Component<Props, State> {
   }
 
   public render(): JSX.Element {
-    return (
+    return !this.state.total ? (
+      <div />
+    ) : (
       <div className={'bar-chart flex-column flex-center flex-grow ' + (this.props.className || '')}>
         {this.props.title && <h3 className="title">{this.props.title}</h3>}
         <MuiBarChart
diff --git a/ui/components/charts/PieChart.tsx b/ui/components/charts/PieChart.tsx
index 9204372..7dd20b4 100644
--- a/ui/components/charts/PieChart.tsx
+++ b/ui/components/charts/PieChart.tsx
@@ -44,7 +44,9 @@ export class PieChart extends React.Component<Props, State> {
   }
 
   public render(): JSX.Element {
-    return (
+    return !this.state.total ? (
+      <div />
+    ) : (
       <div className={'pie-chart flex-column flex-center flex-grow ' + (this.props.className || '')}>
         {this.props.title && <h3 className="title">{this.props.title}</h3>}
         <MuiPieChart
diff --git a/ui/components/charts/Tile.tsx b/ui/components/charts/Tile.tsx
index 0cb2c53..45061f7 100644
--- a/ui/components/charts/Tile.tsx
+++ b/ui/components/charts/Tile.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { IColor } from 'azure-devops-extension-api';
+import { Tooltip } from 'azure-devops-ui/TooltipEx';
 import { rgbToHex } from 'azure-devops-ui/Utilities/Color';
 
 import './Tile.scss';
@@ -34,23 +35,24 @@ export class Tile extends React.Component<Props, State> {
 
   public render(): JSX.Element {
     return (
-      <div
-        className={
-          'tile text-on-communication-background flex-column flex-center padding-8' + (this.props.className || '')
-        }
-        style={{
-          backgroundColor: this.props.color ? rgbToHex(this.props.color) : undefined,
-          width: this.props.size || 160,
-          height: this.props.size || 160,
-        }}
-        title={`${this.props.title}: ${this.props.value}`}
-      >
-        {this.props.title && <h2 className="title text-ellipsis">{this.props.title}</h2>}
-        <div className="flex-column flex-center flex-grow">
-          <div className="value">{this.props.value.substring(0, 5)}</div>
+      <Tooltip text={`${this.props.title}: ${this.props.value}`}>
+        <div
+          className={
+            'tile text-on-communication-background flex-column flex-center padding-8' + (this.props.className || '')
+          }
+          style={{
+            backgroundColor: this.props.color ? rgbToHex(this.props.color) : undefined,
+            width: this.props.size || 160,
+            height: this.props.size || 160,
+          }}
+        >
+          {this.props.title && <h2 className="title text-ellipsis">{this.props.title}</h2>}
+          <div className="flex-column flex-center flex-grow">
+            <div className="value">{this.props.value.substring(0, 5)}</div>
+          </div>
+          {this.props.subtitle && <div className="subtitle text-ellipsis">{this.props.subtitle}</div>}
         </div>
-        {this.props.subtitle && <div className="subtitle text-ellipsis">{this.props.subtitle}</div>}
-      </div>
+      </Tooltip>
     );
   }
 }
diff --git a/ui/components/sbom/SpdxSecurityTableCard.tsx b/ui/components/sbom/SpdxSecurityTableCard.tsx
index 19b0142..b3ea822 100644
--- a/ui/components/sbom/SpdxSecurityTableCard.tsx
+++ b/ui/components/sbom/SpdxSecurityTableCard.tsx
@@ -445,7 +445,9 @@ function renderAdvisoryCvssCell(
       <div className="bolt-table-cell-content flex-row flex-wrap rhythm-horizontal-4">
         <span>{tableItem.cvssScore} / 10</span>
         <Link
-          tooltipProps={{ text: 'Learn more about how this score is calculated' }}
+          tooltipProps={{
+            text: 'Learn more about the Common Vulnerability Scoring System (CVSS) and how this score was calculated',
+          }}
           className="bolt-table-link bolt-table-link-icon"
           href={`https://nvd.nist.gov/vuln-metrics/cvss/v3-calculator?vector=${tableItem.cvssVector}&version=${tableItem.cvssVersion}`}
           target="_blank"
diff --git a/ui/components/sbom/SpdxSummaryCard.tsx b/ui/components/sbom/SpdxSummaryCard.tsx
index 838e4a3..b3d30e4 100644
--- a/ui/components/sbom/SpdxSummaryCard.tsx
+++ b/ui/components/sbom/SpdxSummaryCard.tsx
@@ -330,25 +330,3 @@ function reduceAsMap<T, K extends keyof any, M>(
   ) as [K, number][];
   return reduced.sort().map(([k, v]) => mapper(k, v));
 }
-
-function summariseAsMap<T, K extends keyof any, V extends keyof any, M>(
-  array: T[],
-  keySelector: (item: T) => K | K[],
-  valueSelector: (item: T) => V,
-  mapper?: (key: K, value: V) => M,
-) {
-  const summarised = Object.entries(
-    array.reduce(
-      (acc, item) => {
-        const key = keySelector(item);
-        const keys = Array.isArray(key) ? key : [key];
-        keys.forEach((k) => {
-          acc[k] = valueSelector(item);
-        });
-        return acc;
-      },
-      {} as Record<K, V>,
-    ),
-  ) as [K, V][];
-  return summarised.sort().map(([k, v]) => (mapper ? mapper(k, v) : { label: k, value: v }));
-}