CODEWITHSUNDEEP
javascriptd3.jschartsnvd3.js
Darren
Darren

Reputation: 2290

NVD3 output date format in tooltip as %d/%m/%y and x-axis date as %d/%m

Looking for a way to output the date format in NVD3 tooltip differently to the date format on x-axis.

Currently displaying the dates as 

chart.xAxis
  .tickFormat(function(d) {
    return d3.time.format('%d / %m')(new Date(d))
  });

and it displays as screenshot of current

How can I output the date in the tooltip as %d/%m/%y whilst keeping the x-axis as %d/%m?

Upvotes: 0

Views: 436

Answers (1)

Autio
Autio

Reputation: 327

You can create custom tooltips by using chart.tooltip.contentGenerator. Add a line which outputs the date in your desired format. For example:

chart.tooltip.contentGenerator(function (d) {
          var html = "<h2>Date: "+ d3.time.format('%d/%m/%y')(new Date(d.value))+"</h2> <ul>";
          d.series.forEach(function(elem){
            html += "<li><h3 style='color:"+elem.color+"'>"
                    +elem.key+"</h3><b>"+elem.value+"</b></li>";
          })
          html += "</ul>"
          return html;

Here is a working JSFiddle for reference: http://jsfiddle.net/wgmpfa2p/5/

Upvotes: 1

Related Questions