diff --git a/app/assets/javascripts/components/metadata/MetadataController.js b/app/assets/javascripts/components/metadata/MetadataController.js
index 6e4f0308..28bbb7f2 100644
--- a/app/assets/javascripts/components/metadata/MetadataController.js
+++ b/app/assets/javascripts/components/metadata/MetadataController.js
@@ -197,12 +197,13 @@ define([
                     };
 
                     $scope.emptyFacets = [{'key':'dummy','data': []}];
+                    $scope.reorder = true;
 
                     $scope.initMetadataView = function () {
                         $scope.initializedMeta = false;
                         $scope.initializedEntity = false;
                         //TODO: to order by black bars set true
-                        $scope.reorder = true;
+
                         $scope.promiseMetaCharts = undefined;
                         $scope.promiseEntityCharts = undefined;
 
diff --git a/public/partials/metadata.html b/public/partials/metadata.html
index 1574c87a..c050080c 100644
--- a/public/partials/metadata.html
+++ b/public/partials/metadata.html
@@ -17,6 +17,9 @@
 
 <div id="metadata" style="padding: 10px 0 0 10px;">
     <p style="font-size:16px; display: inline-block">Frequency Overview</p>
+    <md-switch ng-model="reorder" aria-label="Ordering Mode" ng-change="initMetadataView()" style="display: inline-block; padding: 0 0 0 16px; margin: 0;">
+        Order by black bars
+    </md-switch>
     <md-tabs md-stretch-tabs="always" md-dynamic-height="true">
             <md-tab label="Entities" md-on-select="updateHeight()">
                 <div id="entities_tab" class="tab-pane fade in">