improve chart styling

2022-04-15 03:15:24 -04:00 · 2022-04-15 03:15:24 -04:00 · 9595b406ca
parent 8aaf95c374
commit 9595b406ca
2 changed files with 12 additions and 7 deletions
--- a/static/index.html
+++ b/static/index.html
@ -2,6 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <script src="chart.js"></script>
    <script src="chartjs-adapter-date-fns.bundle.js"></script>
    <script src="chartjs-chart-error-bars.umd.js"></script>
@ -11,13 +12,12 @@
      }
      div.chart {
          margin: 20px auto;
-          position: relative;
-          height: 80vh;
-          width: 80vw;
+          max-width: 750px;
      }
-      label {
-          padding-left: 10px;
-          padding-right: 10px;
+      #controls {
+          display: flex;
+          justify-content: center;
+          gap: 20px 20px;
      }
    </style>
    <title>💩📈</title>
--- a/static/poopGraph.js
+++ b/static/poopGraph.js
@ -107,7 +107,7 @@ function plot(data) {
    const northCtx = document.getElementById('northCanvas');
    const southCtx = document.getElementById('southCanvas');
    let options = {
-        maintainAspectRatio: false,
+        aspectRatio: 1,
        interaction: {
            intersect: false,
        },
@ -127,6 +127,11 @@ function plot(data) {
                text: 'Wastewater COVID RNA Signal (copies/mL)',
            },
        },
+        elements: {
+            pointWithErrorBar: {
+                errorBarWhiskerSize: 5,
+            },
+        },
    };

    const northChart = new Chart(northCtx, {