title: Using Chart.js - Creating Legend for Doughnut Chart
body: <p>Can someone tell me what's wrong with my code? I've successfully generated a doughnut chart using Chart.js, as well as a legend, but I'd like the corresponding segment of the chart to highlight with a tooltip when I hover over each item in the legend, just like how it does on <a href="http://www.chartjs.org/" rel="nofollow">this</a> page</p>
  
  <p>I tried copying over and modifying the code used on that exact page, but I can't get it to work. Advice and help appreciated!!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Chart.js demo&lt;/title&gt;
      &lt;script src='Chart.js'&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;canvas id="race" width="250" height="250" style="width: 250px; height: 250px;"&gt;&lt;/canvas&gt;
  &lt;ul class="doughnut-legend"&gt;
      &lt;li&gt;&lt;span style="background-color:#40af49"&gt;&lt;/span&gt;African American&lt;/li&gt;
      &lt;li&gt;&lt;span style="background-color:#ac558a"&gt;&lt;/span&gt;Other&lt;/li&gt;
      &lt;li&gt;&lt;span style="background-color:#f05541"&gt;&lt;/span&gt;Multi-Racial, Not Hispanic&lt;/li&gt;
      &lt;li&gt;&lt;span style="background-color:#3ac2d0"&gt;&lt;/span&gt;Hispanic/Latino&lt;/li&gt;
      &lt;li&gt;&lt;span style="background-color:#faaf3c"&gt;&lt;/span&gt;Asian&lt;/li&gt;
      &lt;li&gt;&lt;span style="background-color:#4287b0"&gt;&lt;/span&gt;White/Caucasian&lt;/li&gt;
  &lt;/ul&gt;
  &lt;script&gt;
  var pieData = [
              {
                  value: 24.8,
                  color: "#40af49",
                  label: "African American"
              },
              {
                  value : 2.9,
                  color : "#ac558a",
                  label: "Other"
              },
              {
                  value : 5.7,
                  color : "#f05541",
                  label: "Multi-Racial, Not Hispanic"
              },
              {
                  value : 19.1,
                  color : "#3ac2d0",
                  label: "Hispanic/Latino"
              },
              {
                  value : 6.5,
                  color : "#faaf3c",
                  label: "Asian"
              },
              {
                  value : 41,
                  color : "#4287b0",
                  label: "White/Caucasian"
              }
          ];
  
          var race = new Chart(document.getElementById("race").getContext("2d")).Doughnut(pieData, { tooltipTemplate : "&lt;%if (label){%&gt;&lt;%=label%&gt;: &lt;%}%&gt;&lt;%= value %&gt;%", animateRotate: true });
          var legendHolder = document.createElement('div');
      legendHolder.innerHTML = race.generateLegend();
      // Include a html legend template after the module doughnut itself
      helpers.each(legendHolder.firstChild.childNodes, function(legendNode, index){
          helpers.addEvent(legendNode, 'mouseover', function(){
              var activeSegment = race.segments[index];
              activeSegment.save();
              race.showTooltip([activeSegment]);
              activeSegment.restore();
          });
      });
      helpers.addEvent(legendHolder.firstChild, 'mouseout', function(){
          race.draw();
      });
      canvas.parentNode.parentNode.appendChild(legendHolder.firstChild);
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>