title: Chart.js how to show cursor pointer for labels & legends in line chart
body: <p>I have the following example of line chart using <a href="http://www.chartjs.org" rel="noreferrer">chart.js</a>. I want to show:</p>
  
  <ol>
  <li>Pointer cursor for legend &amp; labels on hover  </li>
  <li>Show all the label data on line hover</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var line_chart = new Chart(document.getElementById("line-chart"), {
          type: 'line',
          data: {
              labels: ['May', 'June', 'July'],
              datasets: [{
                      data: [15, 25, 15],
                      label: "My Dataset1",
                      borderColor: "#00F",
                      fill: false
                  }, {
                      data: [35, 15, 25],
                      label: "My Dataset2",
                      borderColor: "#F00",
                      fill: false
                  }
              ]
          },
          options: {
  
              tooltips: {
                  mode: 'label',
              },
              hover: {
                  mode: 'label'
              },
          }
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"&gt;&lt;/script&gt;
  
  &lt;div style='width:80%'&gt;
  &lt;canvas id="line-chart" width="800" height="450"&gt;&lt;/canvas&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>