Adding an interactive legend

Although we created a legend in the past, our legend was bound to be non-interactive as we had no way to move it around. In this sample, we will create a quick and easy legend that will update its position and fade in and fade out when a user rolls over our chart.

Getting ready

Grab the latest files from our previous recipe, 06.03.fade.html and 06.03.fade.js, and let's jump right in. We will hardcode our values in this example, but a more modular approach of extracting elements that would be dynamic is a great way to make this class reusable.

How to do it...

This time around we will create a method in the LineChart object that will create legends for us. Perform the following steps:

1. Create the createLegend method:

   LineChart.prototype.createLegend = function (){
     var	can = document.createElement("canvas");
       can.width=70;
         can.height=100; 
       can.setAttribute("class","canvasLayer");
     chartContainer.appendChild(can);
   
   
       
     this.legend = can;
     this.updateLegend...