title: How to create custom legend in ChartJS
body: <p>I need to create custom legend for my donut chart using ChartJS library.
  I have created donut with default legend provided by ChartJS but I need some modification.</p>
  
  <p>I would like to have value above the car name. Also I don't like sticky legend I want to have it separate from donut so I can change the style for fonts, boxes (next to the text "Audi" for example) </p>
  
  <p>I know there is some <a href="http://www.chartjs.org/docs/latest/configuration/legend.html#html-legends" rel="nofollow noreferrer">Legend generator</a> but I'm not sure how to use it with VueJS - because I'm using VueJS as a framework</p>
  
  <p>This is how my legend looks like now - <a href="https://imgur.com/a/NPUoi" rel="nofollow noreferrer">http://imgur.com/a/NPUoi</a></p>
  
  <p>My code:</p>
  
  <p>From Vue component where I import a donut component:</p>
  
  <pre><code>&lt;div class="col-md-6"&gt;
    &lt;div class="chart-box"&gt;
      &lt;p class="chart-title"&gt;Cars&lt;/p&gt;
      &lt;donut-message id="chart-parent"&gt;&lt;/donut-message&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript: </p>
  
  <pre><code>    import { Doughnut } from 'vue-chartjs'
      export default Doughnut.extend({
  
      ready () {
  
  
      Chart.defaults.global.tooltips.enabled = false;
      Chart.defaults.global.legend.display = false;
  
      this.render({
        labels: ['Audi','BMW','Ford','Opel'],
        datasets: [
          {
            label: 'Cars',
            backgroundColor: ['#35d89b','#4676ea','#fba545','#e6ebfd'],
            data: [40, 30, 20, 10]
          }
        ]
      }, 
      {
        responsive: true,
        cutoutPercentage: 75,
        legend: {
          display: true,
          position: "right",
          fullWidth: true,
          labels: {
            boxWidth: 10,
            fontSize: 14
          }
        },
        animation: {
          animateScale: true
        }
      })
    }
  });
  </code></pre>