update chart

css/style.css

@@ -10,6 +10,22 @@ header {
   margin-bottom: 2rem;
 }
 
+.text-center {
+  text-align: center;
+}
+
+.alcohol-abuse-chart-box {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.alcohol-abuse-chart-box p {
+  margin-top: 1rem;
+}
+
 .heading h1, .heading h2 {
   text-align: center;
 }

index.html

@@ -95,14 +95,18 @@
     </div>
   </div>
   <div class='row'>
-    <div class='column'>
+    <div class='column column-50'>
       <p>Binge drinking (drinking 5 units over a 2 hour period, followed by a period of abstinence) and high alcohol intake (more than 5 units a day), can lead to dependence, tolerance and cravings, which lead to a continuation of alcohol abuse to prevent withdrawal symptoms.</p>
       <p>Chronic alcohol abuse can have adverse effects such as loss of balance and gait, slurred speech, slower reactions, poor memory consolidation, compromised emotional modulation and judgement. These effects in turn can lead to difficulties in social and emotional interactions, and a reduction in motivation, attention and impulse control.</p>
       <p>These effects are studied and proven using methods such as MRI scans which show loss of neurons, particularly in the frontal lobe, the area most associated with reasoning, decision-making and rationality, however it can affect other areas of the brain such as the cerebellum (associated with balance and movement), hippocampus (memory) and amygdala (memory, decision making and emotional responses). [<a href='#ref-1'>1</a>]</p>
 
       <p>Every year millions of people suffer from Alcohol use disorder, leading to physical and mental health problems.</p>
-
+    </div>
+    <div class='column column-50'>
+      <div class='alcohol-abuse-chart-box'>
         <canvas id='alcohol-abuse'></canvas>
+        <p class='text-center'>Alcohol Abuse Across The World [<a href='#ref-2'>2</a>]</p>
+      </div>
     </div>
   </div>
 

javascript/main.js

@@ -9,14 +9,29 @@ const alcoholAbuseChart = new Chart(alcoholAbuseCanvas, {
     labels: alcoholDeathPercent.map(function(a) { return a.year }),
     datasets: [{
       label: 'Deaths by Alcohol Abuse',
-      data: alcoholDeathPercent.map(function(a) { return a.val }),
+      data: alcoholDeathPercent.map(function(a) { return a.val * 100 }),
       fill: true,
       backgroundColor: 'rgb(249, 98, 200)'
     }, {
       label: 'Prevalence of Alcohol Abuse',
-      data: alcoholPrevalencePercent.map(function(a) { return a.val }),
+      data: alcoholPrevalencePercent.map(function(a) { return a.val * 100 }),
       borderColor: 'rgb(97, 152, 250)'
     }]
+  },
+  options: {
+    aspectRatio: 1,
+    scales: {
+      y: {
+        type: 'linear',
+        beginAtZero: true,
+        max: 2,
+        ticks: {
+          callback: function(value, index, values) {
+            return value + '%';
+          }
+        }
+      }
+    }
   }
 });
 

templates/index.nj

@@ -26,14 +26,18 @@
     </div>
   </div>
   <div class='row'>
-    <div class='column'>
+    <div class='column column-50'>
       <p>Binge drinking (drinking 5 units over a 2 hour period, followed by a period of abstinence) and high alcohol intake (more than 5 units a day), can lead to dependence, tolerance and cravings, which lead to a continuation of alcohol abuse to prevent withdrawal symptoms.</p>
       <p>Chronic alcohol abuse can have adverse effects such as loss of balance and gait, slurred speech, slower reactions, poor memory consolidation, compromised emotional modulation and judgement. These effects in turn can lead to difficulties in social and emotional interactions, and a reduction in motivation, attention and impulse control.</p>
       <p>These effects are studied and proven using methods such as MRI scans which show loss of neurons, particularly in the frontal lobe, the area most associated with reasoning, decision-making and rationality, however it can affect other areas of the brain such as the cerebellum (associated with balance and movement), hippocampus (memory) and amygdala (memory, decision making and emotional responses). [<a href='#ref-1'>1</a>]</p>
 
       <p>Every year millions of people suffer from Alcohol use disorder, leading to physical and mental health problems.</p>
-
+    </div>
+    <div class='column column-50'>
+      <div class='alcohol-abuse-chart-box'>
         <canvas id='alcohol-abuse'></canvas>
+        <p class='text-center'>Alcohol Abuse Across The World [<a href='#ref-2'>2</a>]</p>
+      </div>
     </div>
   </div>