NVD3: multiChart wrong format for series

Question

I'm doing a chart using NVD3 multiChart model, I have 4 series, 3 bars associated with the left yAxis and 1 line associated with the right yAxis.

The 3 bars simply have a float value, where the line has a perchentage. Everything works fine, but there is something off in the tooltip, the date it's not correctly formated (not formatted at all, acutally).

Do you have any idea how I can have the same date formatting the I have on the bottom ?

1458428400 -> 20-03-16

Thanks

Luc Luc · Accepted Answer · 2016-03-31T18:17:08

You could do the following:

Define a function that converts epoch to a nice date. Something like this:

function epochToNiceDate(epoch) {
    var date = new Date(0);
    date.setUTCSeconds(epoch);
    var day = date.getDate();
    var month = date.getMonth() + 1;
    var year = date.getFullYear();
    return day + "-" + month + "-" + year;
}

Pass a content generator function for your tooltip to your chart (assuming you have useInteractiveGuideline enabled). You could browse the source code of NVD3 and copy/paste the default content generator and then modify it as you wish. Let's use the following one as an example:

chart.interactiveLayer.tooltip.contentGenerator(function (d) {
    var tooltipTitle = epochToNiceDate(d.value);
    var tooltip = "";

    tooltip += "<table>";
    tooltip += "<thead>";
    tooltip += "<tr><td colspan='3'><strong class='x-value'>" + tooltipTitle + "</strong></td></tr>";
    tooltip += "</thead>";
    tooltip += "<tbody>"

    for(var i in d.series) {
        var currentSeries = d.series[i];
        var color = currentSeries.color;
        var key = currentSeries.key;
        var value = currentSeries.value;

        tooltip += "<tr>";
        tooltip += "   <td class='legend-color-guide'>";
        tooltip += "      <div style='background-color: " + color + ";'></div>";
        tooltip += "   </td>";
        tooltip += "   <td class='key'>" + key + "</td>";
        tooltip += "   <td class='value'>" + value + "</td>";
        tooltip += "</tr>";
    }

    tooltip += "</tbody>";
    tooltip += "</table>";

    return tooltip;
});

You can see it in action here: https://jsfiddle.net/Luc93/qf4u5439/

Good luck!

NVD3: multiChart wrong format for series

2 Answers