How to display all 3 values in labels while using custombars?

Question

I am using customBars to render min,avg,max values and everything looks good. On hover, only the avg value is getting displayed in the label. How can I display all the three min,avg and max values in the label.

I already tried using the y valueFormatter, but it gets only the avg value and not all three.

Answer 1

As you mentioned, this would normally be done by setting a y-axis valueFormatter, but it's only passed the rounded value, not the confidence interval. This is an API oversight—issue filed here.

In the meantime, you can work around the deficiency by determining the row index in an x-axis valueFormatter (which is called before the y-axis valueFormatter) and using the dygraphs data API to access the full tuple of values.

It looks something like this:

axes: {
    x: {
        valueFormatter: function(millis, opts) {
            lastRow = null;
            lastCol = 0;
            for (var i = 0; i < g.numRows(); i++) {
                if (g.getValue(i, 0) == millis) {
                    lastRow = i;
                    break;
                }
            }
            // forward to the default formatter.
            return Dygraph.dateValueFormatter.apply(this, arguments);
        }
    },
    y: {
        valueFormatter: function(num, opts) {
            lastCol++;
            return JSON.stringify(g.getValue(lastRow, lastCol));
        }
    }
}

Full working example in this fiddle.

If you're using a rolling average, unfortunately, you'll run into another issue: the rolled data is only accessible via a private member variable.