diff --git a/flow-report/src/summary/summary.tsx b/flow-report/src/summary/summary.tsx
index 3120010f23fe..f52718af52f0 100644
--- a/flow-report/src/summary/summary.tsx
+++ b/flow-report/src/summary/summary.tsx
@@ -31,7 +31,8 @@ const SummaryNavigationHeader: FunctionComponent<{url: string}> = ({url}) => {
 const SummaryCategory: FunctionComponent<{
   category: LH.ReportResult.Category|undefined,
   href: string,
-}> = ({category, href}) => {
+  gatherMode: LH.Result.GatherMode,
+}> = ({category, href, gatherMode}) => {
   return (
     <div className="SummaryCategory">
       {
@@ -39,6 +40,7 @@ const SummaryCategory: FunctionComponent<{
           <CategoryScore
             category={category}
             href={href}
+            gatherMode={gatherMode}
           /> :
           <div
             className="SummaryCategory__null"
@@ -89,6 +91,7 @@ export const SummaryFlowStep: FunctionComponent<{
             key={c}
             category={reportResult.categories[c]}
             href={`#index=${hashIndex}&anchor=${c}`}
+            gatherMode={lhr.gatherMode}
           />
         ))
       }
diff --git a/flow-report/src/wrappers/category-score.tsx b/flow-report/src/wrappers/category-score.tsx
index 741c9c61b388..f0666c8f52ee 100644
--- a/flow-report/src/wrappers/category-score.tsx
+++ b/flow-report/src/wrappers/category-score.tsx
@@ -12,12 +12,13 @@ import {useReportRenderer} from './report-renderer';
 export const CategoryScore: FunctionComponent<{
   category: LH.ReportResult.Category,
   href: string,
-}> = ({category, href}) => {
+  gatherMode: LH.Result.GatherMode,
+}> = ({category, href, gatherMode}) => {
   const {categoryRenderer} = useReportRenderer();
   const ref = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {
-    const el = categoryRenderer.renderCategoryScore(category, {});
+    const el = categoryRenderer.renderCategoryScore(category, {}, {gatherMode});
 
     // Category label is displayed in the navigation header.
     const label = el.querySelector('.lh-gauge__label,.lh-fraction__label');
diff --git a/lighthouse-core/util-commonjs.js b/lighthouse-core/util-commonjs.js
index a38637d71a70..acec1271222c 100644
--- a/lighthouse-core/util-commonjs.js
+++ b/lighthouse-core/util-commonjs.js
@@ -108,9 +108,6 @@ class Util {
     const relevantAuditToMetricsMap = new Map();
 
     for (const category of Object.values(clone.categories)) {
-      category.displayMode =
-        clone.gatherMode === 'timespan' || clone.gatherMode === 'snapshot' ? 'fraction' : 'gauge';
-
       // Make basic lookup table for relevantAudits
       category.auditRefs.forEach(metricRef => {
         if (!metricRef.relevantAudits) return;
diff --git a/report/renderer/category-renderer.js b/report/renderer/category-renderer.js
index efe176f8ef37..dff302124cf4 100644
--- a/report/renderer/category-renderer.js
+++ b/report/renderer/category-renderer.js
@@ -171,13 +171,14 @@ export class CategoryRenderer {
   /**
    * @param {LH.ReportResult.Category} category
    * @param {Record<string, LH.Result.ReportGroup>} groupDefinitions
+   * @param {{gatherMode: LH.Result.GatherMode}=} options
    * @return {DocumentFragment}
    */
-  renderCategoryHeader(category, groupDefinitions) {
+  renderCategoryHeader(category, groupDefinitions, options) {
     const component = this.dom.createComponent('categoryHeader');
 
     const gaugeContainerEl = this.dom.find('.lh-score__gauge', component);
-    const gaugeEl = this.renderCategoryScore(category, groupDefinitions);
+    const gaugeEl = this.renderCategoryScore(category, groupDefinitions, options);
     gaugeContainerEl.appendChild(gaugeEl);
 
     if (category.description) {
@@ -314,10 +315,11 @@ export class CategoryRenderer {
   /**
    * @param {LH.ReportResult.Category} category
    * @param {Record<string, LH.Result.ReportGroup>} groupDefinitions
+   * @param {{gatherMode: LH.Result.GatherMode}=} options
    * @return {DocumentFragment}
    */
-  renderCategoryScore(category, groupDefinitions) {
-    if (category.displayMode === 'fraction') {
+  renderCategoryScore(category, groupDefinitions, options) {
+    if (options && (options.gatherMode === 'snapshot' || options.gatherMode === 'timespan')) {
       return this.renderCategoryFraction(category);
     }
     return this.renderScoreGauge(category, groupDefinitions);
@@ -484,13 +486,15 @@ export class CategoryRenderer {
    *   ├── …
    *   ⋮
    * @param {LH.ReportResult.Category} category
-   * @param {Object<string, LH.Result.ReportGroup>} [groupDefinitions]
+   * @param {Object<string, LH.Result.ReportGroup>=} groupDefinitions
+   * @param {'PSI'=} environment
+   * @param {{gatherMode: LH.Result.GatherMode}=} options
    * @return {Element}
    */
-  render(category, groupDefinitions = {}) {
+  render(category, groupDefinitions = {}, environment, options) {
     const element = this.dom.createElement('div', 'lh-category');
     this.createPermalinkSpan(element, category.id);
-    element.appendChild(this.renderCategoryHeader(category, groupDefinitions));
+    element.appendChild(this.renderCategoryHeader(category, groupDefinitions, options));
 
     // Top level clumps for audits, in order they will appear in the report.
     /** @type {Map<TopLevelClumpId, Array<LH.ReportResult.AuditRef>>} */
diff --git a/report/renderer/performance-category-renderer.js b/report/renderer/performance-category-renderer.js
index 6d1d2a33f888..4fc1086b4f47 100644
--- a/report/renderer/performance-category-renderer.js
+++ b/report/renderer/performance-category-renderer.js
@@ -156,19 +156,20 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
    * @param {LH.ReportResult.Category} category
    * @param {Object<string, LH.Result.ReportGroup>} groups
    * @param {'PSI'=} environment 'PSI' and undefined are the only valid values
+   * @param {{gatherMode: LH.Result.GatherMode}=} options
    * @return {Element}
    * @override
    */
-  render(category, groups, environment) {
+  render(category, groups, environment, options) {
     const strings = Util.i18n.strings;
     const element = this.dom.createElement('div', 'lh-category');
     if (environment === 'PSI') {
       const gaugeEl = this.dom.createElement('div', 'lh-score__gauge');
-      gaugeEl.appendChild(this.renderCategoryScore(category, groups));
+      gaugeEl.appendChild(this.renderCategoryScore(category, groups, options));
       element.appendChild(gaugeEl);
     } else {
       this.createPermalinkSpan(element, category.id);
-      element.appendChild(this.renderCategoryHeader(category, groups));
+      element.appendChild(this.renderCategoryHeader(category, groups, options));
     }
 
     // Metrics.
diff --git a/report/renderer/report-renderer.js b/report/renderer/report-renderer.js
index 9d3f62171715..75ce130fe43e 100644
--- a/report/renderer/report-renderer.js
+++ b/report/renderer/report-renderer.js
@@ -160,7 +160,11 @@ export class ReportRenderer {
 
     for (const category of Object.values(report.categories)) {
       const renderer = specificCategoryRenderers[category.id] || categoryRenderer;
-      const categoryGauge = renderer.renderCategoryScore(category, report.categoryGroups || {});
+      const categoryGauge = renderer.renderCategoryScore(
+        category,
+        report.categoryGroups || {},
+        {gatherMode: report.gatherMode}
+      );
 
       if (Util.isPluginCategory(category.id)) {
         pluginGauges.push(categoryGauge);
@@ -238,12 +242,18 @@ export class ReportRenderer {
     }
 
     const categories = reportSection.appendChild(this._dom.createElement('div', 'lh-categories'));
+    const categoryOptions = {gatherMode: report.gatherMode};
     for (const category of Object.values(report.categories)) {
       const renderer = specificCategoryRenderers[category.id] || categoryRenderer;
       // .lh-category-wrapper is full-width and provides horizontal rules between categories.
       // .lh-category within has the max-width: var(--report-width);
       const wrapper = renderer.dom.createChildOf(categories, 'div', 'lh-category-wrapper');
-      wrapper.appendChild(renderer.render(category, report.categoryGroups));
+      wrapper.appendChild(renderer.render(
+        category,
+        report.categoryGroups,
+        undefined, // environment
+        categoryOptions
+      ));
     }
 
     const reportFragment = this._dom.createFragment();
diff --git a/report/renderer/util.js b/report/renderer/util.js
index 603be65d5dc0..eed704243ba4 100644
--- a/report/renderer/util.js
+++ b/report/renderer/util.js
@@ -105,9 +105,6 @@ export class Util {
     const relevantAuditToMetricsMap = new Map();
 
     for (const category of Object.values(clone.categories)) {
-      category.displayMode =
-        clone.gatherMode === 'timespan' || clone.gatherMode === 'snapshot' ? 'fraction' : 'gauge';
-
       // Make basic lookup table for relevantAudits
       category.auditRefs.forEach(metricRef => {
         if (!metricRef.relevantAudits) return;
diff --git a/report/test/renderer/category-renderer-test.js b/report/test/renderer/category-renderer-test.js
index ef6e5cca5058..2c34aef05d99 100644
--- a/report/test/renderer/category-renderer-test.js
+++ b/report/test/renderer/category-renderer-test.js
@@ -290,8 +290,12 @@ describe('CategoryRenderer', () => {
     });
 
     it('renders the category header with fraction', () => {
-      category.displayMode = 'fraction';
-      const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
+      const categoryDOM = renderer.render(
+        category,
+        sampleResults.categoryGroups,
+        undefined,
+        {gatherMode: 'snapshot'}
+      );
 
       const gauge = categoryDOM.querySelector('.lh-fraction__content');
       assert.equal(gauge.textContent.trim(), '49/54', 'fraction is included');
diff --git a/report/types/report-result.d.ts b/report/types/report-result.d.ts
index c97806dae1b0..1168ea70220f 100644
--- a/report/types/report-result.d.ts
+++ b/report/types/report-result.d.ts
@@ -18,7 +18,6 @@ interface ReportResult extends LHResult {
 declare module ReportResult {
   interface Category extends LHResult.Category {
     auditRefs: Array<AuditRef>;
-    displayMode: 'gauge'|'fraction';
   }
 
   interface AuditRef extends LHResult.AuditRef {