title: Chart.js Legend Customization
body: <p>I was having some problem with self-customized chart legend for chart.js. This is how my doughtnut chart looks like:</p>
  
  <p>As you can see, the legend at the side is not showing the colored-square icon. By right, it should look like this:</p>
  
  <p>My HTML for the chart:</p>
  
  <pre><code>&lt;canvas id="merchantChart" height="660" width="330"&gt;&lt;/canvas&gt;
  &lt;div id="merchantLegend" class="chart-legend"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This is the part where I set the color for each slice and override the default chart legend provided by chart.js:</p>
  
  <pre><code>var opt = {
        type: "doughnut",
        data: { 
          labels: labelData, 
          datasets: [{ 
          data: priceData, 
          backgroundColor:  "rgba(220,220,220,0)",
          borderColor: colorArr,
          borderWidth: 1.5,
          hoverBackgroundColor: colorArr
          }] 
        }, 
        options: options
      };
  
      if (merchantChart) merchantChart.destroy();
      merchantChart = new Chart(ctx, opt);
  
      merchantChart.update(); 
      merchantLegend.innerHTML = merchantChart.generateLegend();
  </code></pre>
  
  <p>As you can see, because I am setting the backgroundColor for each slice to be transparent, is there any way to generateLegend() based on the borderColor of each slice?</p>
  
  <p>Thanks!</p>