JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.5/chartjs-plugin-annotation.js"></script>

<div class="wrap">

<canvas id="chart"></canvas>

</div>

CSS

.wrap { background-color:#000; }

JavaScript

var q1 = "This is question 1";
var q2 = "This is question 2";
var q3 = "This is question 3";
var q4 = "This is question 4";
var q5 = "This is question 5";

var questions = [q1, q2, q3, q4, q5];

var questionsArrayLength = questions.length;

for (var i = 0; i < questionsArrayLength; i++) {
  console.log(questions[i]);
}

var canvas = document.getElementById('chart');

canvas.height = 500;

var data = {
  labels: ["Q1", "Q2", "Q3", "Q4", "Q5"],
  datasets: [{
      label: "Your answers",
      fill: false,
      lineTension: 0.1,
      backgroundColor: "rgba(75,192,192,0.4)",
      borderColor: "rgba(75,192,192,1)",
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: "rgba(75,192,192,1)",
      pointBackgroundColor: "rgba(75,192,192,1)",
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: "rgba(75,192,192,1)",
      pointHoverBorderColor: "rgba(220,220,220,1)",
      pointHoverBorderWidth: 2,
      pointRadius: 5,
      decimals: false,
      pointHitRadius: 10,
      data: [1,3,4,5,3],
      stack: 4
    },
    {
      label: "Average answers",
      fill: false,
      lineTension: 0.1,
      borderColor: "rgba(79,104,241,1)",
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: "rgba(75,192,192,1)",
      pointBackgroundColor: "rgba(79,104,241,1)",
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: "rgba(79,104,241,1)",
      pointHoverBorderColor: "rgba(220,220,220,1)",
      pointHoverBorderWidth: 2,
      pointRadius: 5,
      decimals: false,
      pointHitRadius: 10,
      data: [2, 7, 5, 10, 3],
      stack: 5
    },
    {
      label: "Your average",
      pointStyle: 'line',
      fill: false,
      borderColor: "#ffffff",
      borderCapStyle: 'round',
      borderDash: [0.5, 5],
      borderDashOffset: 1,
     ...