From 9595b406ca4faf6940a4ba7f8c4a5f00386a6c4c Mon Sep 17 00:00:00 2001 From: xenofem Date: Fri, 15 Apr 2022 03:15:24 -0400 Subject: [PATCH] improve chart styling --- static/index.html | 12 ++++++------ static/poopGraph.js | 7 ++++++- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/static/index.html b/static/index.html index 447dfaf..4169f6e 100644 --- a/static/index.html +++ b/static/index.html @@ -2,6 +2,7 @@ + @@ -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; } 💩📈 diff --git a/static/poopGraph.js b/static/poopGraph.js index abda5ea..88be48e 100644 --- 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, {