diff --git a/frontend/src/app/components/statistics/chartist.component.scss b/frontend/src/app/components/statistics/chartist.component.scss
index 6eceb7edc..e3c813602 100644
--- a/frontend/src/app/components/statistics/chartist.component.scss
+++ b/frontend/src/app/components/statistics/chartist.component.scss
@@ -1,6 +1,11 @@
 .ct-legend{
     top: 130px;
+    display: flex;
+    flex-direction: column-reverse;
     @media (min-width: 653px) {
         top: 90px;
     }
+}
+.ct-legend.inverted{
+    flex-direction: column;
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/statistics/chartist.component.ts b/frontend/src/app/components/statistics/chartist.component.ts
index 924a4a598..d87c464f7 100644
--- a/frontend/src/app/components/statistics/chartist.component.ts
+++ b/frontend/src/app/components/statistics/chartist.component.ts
@@ -72,7 +72,7 @@ export class ChartistComponent implements OnInit, OnChanges, OnDestroy {
   // @ts-ignore
   public chart: ChartInterfaces;
 
-  private element: HTMLElement;
+  private element: HTMLElement;  
 
   constructor(
     element: ElementRef,
@@ -367,6 +367,10 @@ Chartist.plugins.legend = function (options: any) {
         function createLegendElement() {
             const legendElement = document.createElement('ul');
             legendElement.className = 'ct-legend';
+            const inverted = localStorage.getItem('inverted-graph') === 'true';
+            if (inverted){
+                legendElement.classList.add('inverted');
+            }
             if (chart instanceof Chartist.Pie) {
                 legendElement.classList.add('ct-legend-inside');
             }
diff --git a/frontend/src/app/components/television/television.component.scss b/frontend/src/app/components/television/television.component.scss
index ed9cfbb5c..d7b105bfb 100644
--- a/frontend/src/app/components/television/television.component.scss
+++ b/frontend/src/app/components/television/television.component.scss
@@ -69,6 +69,8 @@
 }
 :host ::ng-deep .ct-legend {
   top: 20px !important;
+  display: flex;
+  flex-direction: column-reverse;
   @media(min-height: 800px){
     padding-top: 40px !important;
   }