Search code examples
javascriptdygraphs

Adding extra information to dygraph legend?


Is there an easy way to be able to add extra data to the dygraph legend?

I obviously want to display the x & y data values, but the underlying data point holds extra information that I want to show to the user.

I can obviously use the callback option to find out what point has been moused over . So is the only option to use the callback and then have my own div which shows this information rather than using the dygraph legend?


Solution

  • The easiest way to do this is with the legendFormatter option in the upcoming 2.0.0 release:

    function legendFormatter(data) {
      if (data.x == null) return '';  // no selection
      return data.xHTML +
          data.series
          .map(v => v.labelHTML + ': ' + v.yHTML)  // modify as needed
          .join(' ');
    }
    
    new Dygraph(div, data, { legendFormatter });