title: How to customize the tooltip of a Chart.js Line Chart?
body: <p>I'm trying to show some data using a Line chart from <code>Chart.js</code></p>
  <p>My current chart looks like this:</p>
  <p><a href="https://i.stack.imgur.com/lYaZQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lYaZQ.png" alt="enter image description here" /></a></p>
  <p>My desired output should be displayed as follows:</p>
  <p><a href="https://i.stack.imgur.com/1zxP4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1zxP4.png" alt="enter image description here" /></a></p>
  <p>My code for the first chart is the following:</p>
  <pre><code>var chart = new Chart(ctx, {
    type: &quot;line&quot;,
    data: {
      labels: This.xAxis,
      datasets: [{
        backgroundColor: gradient,
        pointBackgroundColor: &quot;white&quot;,
        borderWidth: 1,
        borderColor: &quot;#5946B0&quot;,
        pointRadius: 2,
        displayColors: false,
        data: This.yAxis
      }]
    },
    options: {
      title: {
        display: false,
        text: &quot;Test&quot;
      },
      tooltips: {
        backgroundColor: &quot;#FAFAFA&quot;,
        borderColor: &quot;lightgreen&quot;,
        borderWidth: 1,
        titleFontColor: &quot;black&quot;,
        titleFontStyle: &quot;normal&quot;,
        displayColors: false,
        bodyFontColor: &quot;black&quot;
      },
      legend: {
        display: false
      },
      plugins: {
        zoom: {
          pan: {
            enabled: true,
            mode: &quot;x&quot;,
            speed: 10,
            threshold: 10
          },
          zoom: {
            enabled: true,
            mode: &quot;y&quot;
          }
        }
      }
    }
  });
  </code></pre>