Graph Headers

- Only for past 30 days and annual
- Will probably change the pie graph to some other data

Author: programmingKyle

src/graphAnnual.js

@@ -31,6 +31,10 @@ function createAnnualHoursGraph() {
         legend: {
           display: false,
         },
+        title: {
+          display: true,
+          text: 'Annual Hours',
+        },
       },
       scales: {
         y: {

src/graphMonth.js

@@ -37,6 +37,10 @@ function createChart() {
         legend: {
           display: false,
         },
+        title:{
+          display: true,
+          text: 'Past 30 Days',
+        }
       },
       scales: {
         y: {

src/index.css

@@ -217,7 +217,7 @@ h1,h2,h3,h4,h5,h6 {
 
 .bottom-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: 1fr 1fr auto;
   grid-gap: 5px;
   overflow: hidden;
 }
@@ -296,7 +296,6 @@ h1,h2,h3,h4,h5,h6 {
   background-color: #252525
 }
 
-
 .topic-item-div h3 {
   text-align: left;
   color: #9593D9;

src/index.html

@@ -87,7 +87,7 @@ <h3>10.5</h3>
           </div>
           <div class="bottom-right-graphs">
             <div class="container">
-              <canvas id="topicHoursGraph" style="width: 100%; height: auto; align-self: center"></canvas>
+              <canvas id="topicHoursGraph" style="width: auto; height: 100%; align-self: center;"></canvas>
             </div>
             <div class="container">
               <canvas id="annualHoursGraph"></canvas>