diff --git a/src/components/MiniGoban/MiniGoban.styl b/src/components/MiniGoban/MiniGoban.styl
index 039b0b6e04..2acd2ab514 100644
--- a/src/components/MiniGoban/MiniGoban.styl
+++ b/src/components/MiniGoban/MiniGoban.styl
@@ -40,7 +40,7 @@
         align-items: center;
         margin-bottom: 0.5rem;
 
-        .game-date {
+        .game-date, .game-result {
             font-size: smaller;
         }
     }
diff --git a/src/components/MiniGoban/MiniGoban.tsx b/src/components/MiniGoban/MiniGoban.tsx
index 8087152a80..78df727745 100644
--- a/src/components/MiniGoban/MiniGoban.tsx
+++ b/src/components/MiniGoban/MiniGoban.tsx
@@ -28,6 +28,7 @@ import {PersistentElement} from "PersistentElement";
 import {rankString, getUserRating} from "rank_utils";
 import { Clock } from 'Clock';
 import { fetch } from "player_cache";
+import { getGameResultText } from "misc";
 
 interface MiniGobanProps {
     id: number;
@@ -127,9 +128,37 @@ export class MiniGoban extends React.Component<MiniGobanProps, any> {
         }
 
         if (this.props.title) {
+
+            // we have to cook up a `result` object to pass to getGameResultText
+            let result:any;
+
+            if (this.goban.engine.winner === this.goban.engine.black_player_id) {
+                result = {
+                    black_lost: false,
+                    white_lost: true
+                };
+            }
+            else if (this.goban.engine.winner === this.goban.engine.white_player_id) {
+                result = {
+                    black_lost: true,
+                    white_lost: false
+                };
+            }
+            else {
+                result = {
+                    black_lost: true,
+                    white_lost: true
+                };
+            }
+
+            result.outcome = this.goban.engine.outcome;
+
+            const result_string = getGameResultText(result);
+
             this.setState({
                 game_name: this.goban.engine.game_name || "",
-                game_date: this.goban.config.end_time ? moment(new Date(this.goban.config.end_time * 1000)).format("LLL") : ""
+                game_date: this.goban.config.end_time ? moment(new Date(this.goban.config.end_time * 1000)).format("LLL") : "",
+                game_result: result_string
             });
         }
 
@@ -173,6 +202,7 @@ export class MiniGoban extends React.Component<MiniGobanProps, any> {
                 <div className={"minigoban-title"}>
                     <div>{this.state.game_name}</div>
                     <div className="game-date">{this.state.game_date}</div>
+                    <div className="game-result">{this.state.game_result}</div>
                 </div>
             }
             <div className="inner-container">
@@ -188,7 +218,7 @@ export class MiniGoban extends React.Component<MiniGobanProps, any> {
                         <span className={`player-name`}>{this.state.black_name}</span>
                         <span className={`player-rank`}>{this.state.black_rank}</span>
                         {this.state.finished || <Clock compact goban={this.goban} color='black' className='mini-goban' />}
-                        <span className="score">{this.state.black_points}</span>
+                        {this.state.finished || <span className="score">{this.state.black_points}</span>}
                     </div>
                 }
                 {!this.props.noText &&
@@ -196,7 +226,7 @@ export class MiniGoban extends React.Component<MiniGobanProps, any> {
                         <span className={`player-name`}>{this.state.white_name}</span>
                         <span className={`player-rank`}>{this.state.white_rank}</span>
                         {this.state.finished || <Clock compact goban={this.goban} color='white' className='mini-goban' />}
-                        <span className="score">{this.state.white_points}</span>
+                        {this.state.finished || <span className="score">{this.state.white_points}</span>}
                     </div>
                 }
             </div>
diff --git a/src/components/RatingsChart/RatingsChart.tsx b/src/components/RatingsChart/RatingsChart.tsx
index 2990335c52..b8242ca59c 100644
--- a/src/components/RatingsChart/RatingsChart.tsx
+++ b/src/components/RatingsChart/RatingsChart.tsx
@@ -232,11 +232,15 @@ export class RatingsChart extends React.Component<RatingsChartProperties, any> {
         this.graph_width = 2.0 * sizes.width / 3.0;
 
         if (this.width > 768) {  /* it gets too bunched up to show the pie */
-            this.show_pie = true;
+            if (!this.show_pie) {
+                this.show_pie = true;
+                this.plotWinLossPie();
+            }
         }
         else {
             this.show_pie = false;
             this.graph_width = this.width;
+            this.hideWinLossPie();
         }
 
         this.pie_width = sizes.width / 3.0;
@@ -600,7 +604,17 @@ export class RatingsChart extends React.Component<RatingsChartProperties, any> {
         }
     }
 
+    hideWinLossPie = () => {
+        if (this.win_loss_pie) {
+            this.win_loss_pie.selectAll('path').remove();
+            this.win_loss_pie.selectAll('rect').remove();
+            this.win_loss_pie.selectAll('text').remove();
+        }
+    }
+
     plotWinLossPie = () => {
+        if (!this.win_loss_pie) { return; }
+
         let agg = this.win_loss_aggregate;
 
         /* with well spread data, the order here places wins on top, and stronger opponent on right of pie */
diff --git a/src/components/RatingsChartByGame/RatingsChartByGame.tsx b/src/components/RatingsChartByGame/RatingsChartByGame.tsx
index ca66a3f391..c1051fa7b9 100644
--- a/src/components/RatingsChartByGame/RatingsChartByGame.tsx
+++ b/src/components/RatingsChartByGame/RatingsChartByGame.tsx
@@ -62,7 +62,7 @@ const secondary_charts_height  = chart_height - margin2.top - margin2.bottom;
 const show_hovered_game_delay = 250; // milliseconds till game info of hovered data point is updated
                                      // fast enough to not feel like a wait, while limiting rate
 
-const restore_delay = 1500;  // long enough to go click on the minigoban if you want to, not so long as to come as a suprise later.
+const pie_restore_delay = 1500;  // long enough to go click on the minigoban if you want to, not so long as to come as a suprise later.
 
 let format_date = (d:Date) => moment(d).format('ll');
 
@@ -226,9 +226,15 @@ export class RatingsChartByGame extends React.Component<RatingsChartProperties,
         this.graph_width = 2.0 * sizes.width / 3.0;
 
         if (this.width > 768) {  /* it gets too bunched up to show the pie */
-            this.show_pie = true;
+            if (!this.show_pie) {
+                this.show_pie = true;
+                this.plotWinLossPie();
+            }
         }
         else {
+            if (this.show_pie) {
+                this.hideWinLossPie();
+            }
             this.show_pie = false;
             this.graph_width = this.width;
         }
@@ -385,7 +391,7 @@ export class RatingsChartByGame extends React.Component<RatingsChartProperties,
 
                 // get rid of mouse-hover effects
                 window.clearTimeout(this.hover_timer);
-                self.hover_timer = window.setTimeout(this.restorePie.bind(self), restore_delay);
+                self.hover_timer = window.setTimeout(this.restorePie.bind(self), pie_restore_delay);
             })
             .on('mousemove', function() {
                 /* tslint:disable */
@@ -536,12 +542,16 @@ export class RatingsChartByGame extends React.Component<RatingsChartProperties,
     }
 
     hideWinLossPie = () => {
-        this.win_loss_pie.selectAll('path').remove();
-        this.win_loss_pie.selectAll('rect').remove();
-        this.win_loss_pie.selectAll('text').remove();
+        if (this.win_loss_pie) {
+            this.win_loss_pie.selectAll('path').remove();
+            this.win_loss_pie.selectAll('rect').remove();
+            this.win_loss_pie.selectAll('text').remove();
+        }
     }
 
     plotWinLossPie = () => {
+        if (!this.win_loss_pie) { return; }
+
         let agg = this.win_loss_aggregate;
 
         /* with well spread data, the order here places wins on top, and stronger opponent on right of pie */
@@ -739,7 +749,9 @@ export class RatingsChartByGame extends React.Component<RatingsChartProperties,
         }
 
         this.computeWinLossNumbers();
+
         if (!this.state.loading && this.show_pie) {
+            this.setState({hovered_game_id: null}); // make sure hovered game is not lingering while the are doing subselect
             this.plotWinLossPie();
         }
     }
@@ -783,7 +795,6 @@ export class RatingsChartByGame extends React.Component<RatingsChartProperties,
                         title={true}
                     />
                 }
-                {this.show_pie ? null : this.renderWinLossNumbersAsText()}
             </div>
         );
     }