Adjust font size on graphs in small resolutions

Author: YunkeXiao

apps/dash-opioid-epidemic/app.py

@@ -206,6 +206,7 @@
                                     paper_bgcolor="#F4F4F8",
                                     plot_bgcolor="#F4F4F8",
                                     autofill=True,
+                                    margin=dict(t=75, r=50, b=100, l=50),
                                 ),
                             ),
                         ),
@@ -330,6 +331,7 @@ def display_selected_data(selectedData, chart_dropdown, year):
                 paper_bgcolor="#1f2630",
                 plot_bgcolor="#1f2630",
                 font=dict(color="#2cfec1"),
+                margin=dict(t=75, r=50, b=100, l=75),
             ),
         )
     pts = selectedData["points"]
@@ -379,6 +381,11 @@ def display_selected_data(selectedData, chart_dropdown, year):
         fig_layout["yaxis"]["tickfont"]["color"] = "#2cfec1"
         fig_layout["xaxis"]["gridcolor"] = "#5b5b5b"
         fig_layout["yaxis"]["gridcolor"] = "#5b5b5b"
+        fig_layout["margin"]["t"] = 75
+        fig_layout["margin"]["r"] = 50
+        fig_layout["margin"]["b"] = 100
+        fig_layout["margin"]["l"] = 50
+
         return fig
 
     fig = dff.iplot(

apps/dash-opioid-epidemic/assets/opioid.css

@@ -686,6 +686,12 @@ hr {
     }
 }
 
+@media (max-width: 550px) {
+    #county-choropleth .annotation-text{
+        font-size: 1.2rem !important;
+    }
+}
+
 /* Left column
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 @media only screen and (max-width: 1250px) {
@@ -727,6 +733,10 @@ hr {
     #graph-container {
         margin-top: 5rem;
     }
+
+    #selected-data {
+        height: 55rem;
+    }
 }
 
 @media (min-width: 1251px) {
@@ -748,30 +758,31 @@ hr {
         align-items: stretch;
         justify-content: flex-start;
     }
+
+    #selected-data {
+        flex-grow: 1;
+    }
 }
 
 @media (max-width: 550px) {
     #graph-container {
         padding: 2.5rem;
     }
+
+    #selected-data .xtick text{
+        font-size: 1.1rem !important;
+    }
+
+    #selected-data .gtitle{
+        font-size: 1.7rem !important;
+    }
 }
 
 
 #chart-dropdown {
     margin-bottom: 6.6rem;
 }
 
-@media (max-width: 1250px){
-    #selected-data{
-        height: 55rem;
-    }
-}
-@media (min-width: 1251px){
-    #selected-data{
-        flex-grow: 1;
-    }
-}
-
 /* Dropdown
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .Select-value {