Multi-Line Graph: Making it Interactive

The last step we’ll take in this example is to provide ourselves with a bit of control over how the graph looks. Even with the multiple colors, the graph could still be said to be “busy.” To clean it up or at least to provide the ability to more clearly display the data that a user wants to see, we will add code that will allow us to click on a legend label, and this will toggle the corresponding graph line on or off.

This is a progression from the example of how to show/hide an element by clicking on another element that was introduced in the “Assorted tips and tricks” chapter.

Adding interactivity

The only changes to our code that needs to be implemented are in the forEach section below. I have left some comments with asterisks in the code below to illustrate lines that are added.