Chart JS custom tooltip not showing

Question

I have a line graph and I want to alter it's tooltip. I want it, on hover, to show the follow (as an example):

Question: This is question 1
Your answers: 3
Average answers: 7
Your average: 5
Average: 7

The data in the tooltip is fine and works. See this fiddle here

What I'm trying to do is to add to the tooltip so that it can display the question in it too.

What I've tried:

 tooltips: {
   callbacks: {
     label: function(tooltipItem, data) {
       var dataset=data.datasets[tooltipItem.datasetIndex];
       return data.datasets[tooltipItem.datasetIndex].label+ ' : ' +dataset.data[tooltipItem.index]+questions[i];
     }
   }
 }

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,
      lineTension: 0.1,
      data: [5, 5, 5, 5, 5],

    },
    {
      label: "Average",
      pointStyle: 'line',
      fill: false,
      borderColor: "#ffffff",
      borderCapStyle: 'round',
      borderDash: [5, 8],
      borderDashOffset: 0.6,
      lineTension: 0.1,
      data: [7, 7, 7, 7, 7],
    },
  ]
};

var options = {
 tooltips: {
   callbacks: {
     label: function(tooltipItem, data) {
       var dataset=data.datasets[tooltipItem.datasetIndex];
       return data.datasets[tooltipItem.datasetIndex].label+ ' : ' +dataset.data[tooltipItem.index]+questions[i];
     }
   }
 },
  plugins: {
    filler: {
      propagate: true
    }
  },
  responsive: true,
  maintainAspectRatio: false,
  tooltips: {
    mode: 'index'
  },
  showLines: true,
  scales: {
    yAxes: [{
      gridLines: {
        color: 'rgb(255, 255, 255)',
        z: 2
      },
      scaleLabel: {
        display: true,
        labelString: 'Scores'
      },
      stacked: false,
      ticks: {
        beginAtZero: 0,
        suggestedMin: 1,
        suggestedMax: 10,
        stepSize: 2,
        userCallback: function(label, index, labels) {
          // when the floored value is the same as the value we have a whole number
          if (Math.floor(label) === label) {
            return label;
          }
        },
      }
    }],
    xAxes: [{
      gridLines: {
        color: 'rgb(255, 255, 255)',
        z: 2
      },
      scaleLabel: {
        display: true,
        labelString: 'Questions'
      },
    }]
  },
  annotation: {
    annotations: [
      {
        drawTime: "beforeDatasetsDraw",
        type: "box",
        id: "n",
        xScaleID: "x-axis-0",
        yScaleID: "y-axis-0",
        xMin: "Q1",
        xMax: "Q5",
        yMin: 0,
        yMax: 3.7,
        backgroundColor: "rgba(26,26,26,0.6)",
        borderColor: "rgba(26,26,26,0.6)",
        borderWidth: 1,

      },
      {
        drawTime: "beforeDatasetsDraw",
        type: "box",
        xScaleID: "x-axis-0",
        yScaleID: "y-axis-0",
        xMin: "Q1",
        xMax: "Q5",
        yMin: 3.7,
        yMax: 7,
        backgroundColor: 'rgba(88,88,88,0.6)',
        borderColor: 'rgba(88,88,88,0.6)',
        borderWidth: 1,

      },
      {
        drawTime: "beforeDatasetsDraw",
        type: "box",
        xScaleID: "x-axis-0",
        yScaleID: "y-axis-0",
        xMin: "Q1",
        xMax: "Q5",
        yMin: 7,
        yMax: 10,
        backgroundColor: 'rgba(31,42,97,0.6)',
        borderColor: 'rgba(88,88,88,0.6)',
        borderWidth: 0
      }
    ]
  }
};

var myLineChart = Chart.Line(document.getElementById('chart'), {
  data: data,
  options: options
});

.wrap { background-color:#000; }

<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>

Answer 1

You have to define a callback function to change the tooltip title as follows.

tooltips: {
    mode: 'index',
    callbacks: {
       title: tooltipItem => 'Question: ' + questions[tooltipItem[0].index]
    }
}

Please check the amended JSFiddle