Fix

lib/shared/addon/components/percent-gauge/component.js

@@ -2,7 +2,8 @@ import Component from '@ember/component';
 import ThrottledResize from 'shared/mixins/throttled-resize';
 import initGraph from 'ui/utils/percent-gauge';
 import layout from './template';
-import { observer } from '@ember/object'
+import { get, set, observer } from '@ember/object'
+import { next } from '@ember/runloop';
 
 export default Component.extend(ThrottledResize, {
   layout,
@@ -13,37 +14,42 @@ export default Component.extend(ThrottledResize, {
   subtitle: null,
   ticks: null,
   svg: null,
+  ready: false,
 
   didInsertElement() {
     this._super(...arguments);
     this.set('svg', initGraph({
       el: this.$()[0],
-      value: this.get('value'),
-      title: this.get('title'),
-      subtitle: this.get('subtitle'),
-      ticks: this.get('ticks'),
+      value: get(this,'value'),
+      title: get(this,'title'),
+      subtitle: get(this,'subtitle'),
+      ticks: get(this,'ticks'),
     }));
+
+    next(this, () => {
+      set(this, 'ready', true);
+    });
   },
 
   onResize() {
-    if (this.get('svg')) {
-      this.get('svg').fit();
+    if ( get(this,'svg') && get(this,'ready') ) {
+      get(this,'svg').fit();
     }
   },
 
   updateTitle: observer('title', function() {
-    this.get('svg').updateTitle(this.get('title'));
+    get(this,'svg').updateTitle(get(this,'title'));
   }),
 
   updateSubTitle: observer('subtitle', function() {
-    this.get('svg').updateSubTitle(this.get('subtitle'));
+    get(this,'svg').updateSubTitle(get(this,'subtitle'));
   }),
 
   updateValue: observer('value', function() {
-    this.get('svg').updateValue(this.get('value'));
+    get(this,'svg').updateValue(get(this,'value'));
   }),
 
   updateTicks: observer('ticks.@each.{label,value}', function() {
-    this.get('svg').updateTicks(this.get('ticks'));
+    get(this,'svg').updateTicks(get(this,'ticks'));
   }),
 });

lib/shared/addon/utils/percent-gauge.js

@@ -127,7 +127,6 @@ function addBottomLine(svg, width, height) {
     .attr("d", lineFunction([{ "x": 0, "y": height }, { "x": width, "y": height }]))
     .attr("class", "gauge-text-stroke")
     .attr("stroke-width", width / 80)
-    .attr("fill");
 }
 
 function addTicks(svg, triangleSize, tooltip, width, height, margin, ticks) {