dygraphs.js custom data for mouseover

Question

Given numerical values on x and y axes, I would like to be able to pass in an array of strings, to be used in x-axis' valueformatter. As in, for a given point on the graph, there would be a corresponding string in an array I could show, and I would simply use the row parameter to fetch a string from an array. (I would sort them before constructing the graph). Is this possible without modifying dygraphs itself?

Answer 1

One of the parameters to valueFormatter is the row index. So you can do this with a valueFormatter callback:

vals = [
  'Foo',
  'Bar',
  'Baz',
  'Quux'
];
new Dygraph(
    document.getElementById("graph"),
    "X,Y,Z\n" +
    "1,0,3\n" +
    "2,2,6\n" +
    "3,4,8\n" +
    "4,6,9\n",
    {
      axes: {
        x: {
          valueFormatter: function(v, opts, seriesName, dygraph, row, col) {
            return vals[row];
          }
        }
      }
    });

See fiddle.