diff --git a/ui/app/components/freestyle/sg-distribution-bar.js b/ui/app/components/freestyle/sg-distribution-bar.js
index ab43ceb038d..7c1f5c57907 100644
--- a/ui/app/components/freestyle/sg-distribution-bar.js
+++ b/ui/app/components/freestyle/sg-distribution-bar.js
@@ -17,6 +17,10 @@ export default Component.extend({
     clearInterval(this.get('timer'));
   },
 
+  distributionBarDatum: computed(() => {
+    return [{ label: 'one', value: 10 }];
+  }),
+
   distributionBarData: computed(() => {
     return [
       { label: 'one', value: 10 },
diff --git a/ui/app/templates/components/freestyle/sg-distribution-bar.hbs b/ui/app/templates/components/freestyle/sg-distribution-bar.hbs
index 3fbc6d993b4..76f4ca2eec8 100644
--- a/ui/app/templates/components/freestyle/sg-distribution-bar.hbs
+++ b/ui/app/templates/components/freestyle/sg-distribution-bar.hbs
@@ -67,4 +67,11 @@
       </div>
     {{/freestyle-annotation}}
   {{/collection.variant}}
+  {{#collection.variant key="single bar"}}
+    {{#freestyle-usage 'distribution-bar-single'}}
+      <div class="block" style="height:50px; width:600px;">
+        {{distribution-bar data=distributionBarDatum}}
+      </div>
+    {{/freestyle-usage}}
+  {{/collection.variant}}
 {{/freestyle-collection}}