title: How to get fixed legend and tooltip for dynamically generated data vue-chartjs
body: <p>I'm trying to generate a vue chart with vuechartjs which would be number 10,20,30,40,50 repeated over a period of time (years). </p>
  
  <p>I'm having hard time getting the legend and tooltip to work as expected.Currently, the label just prints out array of label, and tooltip showing respective labels.</p>
  
  <p>Expected label legend:</p>
  
  <p><code>Label 1, Label 2, Label 3, Label 4, Label 5</code> with respective colors: <code>#F44336, #FC9900, #FCC106, #8BC34A, #4CAF50</code>. </p>
  
  <ol>
  <li>How do I get legend with this label and colors?</li>
  <li>How do I get tool tip showing the <code>label</code> with the data point rather than each <code>labels</code> with the data point?</li>
  <li>How would one add an image to the tooltip / label?</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.component('reactive', {
   extends: VueChartJs.Bar,
   mixins: [VueChartJs.mixins.reactiveProp],
   data: function () {
    return {
     options: {
      scales: {
       yAxes: [{
        ticks: {
         beginAtZero: true
        },
        gridLines: {
         display: true
        }
       }],
       xAxes: [{
        ticks: {
         beginAtZero: true
        },
        gridLines: {
         display: false
        }
       }]
      },
      legend: {
       display: true
      },
      tooltips: {
       enabled: true,
       mode: 'single',
       callbacks: {
        label: function(tooltipItems, data) {
         return '$' + tooltipItems.yLabel;
        }
       }
      },
      responsive: true,
      maintainAspectRatio: false,
      height: 200
     }
    }
   },
   mounted () {
    // this.chartData is created in the mixin
    this.renderChart(this.chartData, this.options)
   }
  })
  
  var vm = new Vue({ 
   el: '.app',
   data () {
    return {
       datacollection: null
      }
   },
   created () {
    this.fillData()
   },
   methods: {
    fillData () {
          this.datacollection = {
            labels: ['January 2010', 'February 2010', 'March', 'April', 'May 2011', 'June 2018', 'July', 'August 2011', 'August', 'October', 'November', 'December 2018'],
            datasets: [
              {
                label: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'], 
                backgroundColor: this.getBackground(),
                data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
              }
            ]
          }
        },
      getRandomInt () {
     var myArray = [10,20,30,40,50]
     return myArray[Math.floor(Math.random()*myArray.length)];
           
        },
    getBackground() {
     return ["#8BC34A", "#4CAF50", "#4CAF50", "#4CAF50", "#4CAF50", "#4CAF50", "#F44336", "#FC9900", "#FCC106", "#8BC34A", "#8BC34A", "#4CAF50"]
    },
    
   }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/vue@2.5.17/dist/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/vue-chartjs@3.4.0/dist/vue-chartjs.js"&gt;&lt;/script&gt;
  
  
  &lt;div class="app"&gt;
   &lt;h1&gt;Bar Chart&lt;/h1&gt;
   &lt;reactive :chart-data="datacollection"&gt;&lt;/reactive&gt;
   &lt;button class="button is-primary" @click="fillData()"&gt;Randomize&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codepen.io/Lawrence_Nara/pen/WYRLwJ" rel="nofollow noreferrer">Codepen</a></p>