xenofem/poop-graph
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Wiki Activity

improve chart styling

Browse source
This commit is contained in:
xenofem 2022-04-15 03:15:24 -04:00
parent 8aaf95c374
commit 9595b406ca
2 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
static/index.html
View file

@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="chart.js"></script> <script src="chart.js"></script>
<script src="chartjs-adapter-date-fns.bundle.js"></script> <script src="chartjs-adapter-date-fns.bundle.js"></script>
<script src="chartjs-chart-error-bars.umd.js"></script> <script src="chartjs-chart-error-bars.umd.js"></script>
@ -11,13 +12,12 @@
} }
div.chart { div.chart {
margin: 20px auto; margin: 20px auto;
position: relative; max-width: 750px;
height: 80vh;
width: 80vw;
} }
label { #controls {
padding-left: 10px; display: flex;
padding-right: 10px; justify-content: center;
gap: 20px 20px;
} }
</style> </style>
<title>💩📈</title> <title>💩📈</title>

7
static/poopGraph.js
View file

@ -107,7 +107,7 @@ function plot(data) {
const northCtx = document.getElementById('northCanvas'); const northCtx = document.getElementById('northCanvas');
const southCtx = document.getElementById('southCanvas'); const southCtx = document.getElementById('southCanvas');
let options = { let options = {
maintainAspectRatio: false, aspectRatio: 1,
interaction: { interaction: {
intersect: false, intersect: false,
}, },
@ -127,6 +127,11 @@ function plot(data) {
text: 'Wastewater COVID RNA Signal (copies/mL)', text: 'Wastewater COVID RNA Signal (copies/mL)',
}, },
}, },
elements: {
pointWithErrorBar: {
errorBarWhiskerSize: 5,
},
},
}; };
const northChart = new Chart(northCtx, { const northChart = new Chart(northCtx, {