score:1
Accepted answer
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/
Source: stackoverflow.com
Related Query
- NVD3 output date format in tooltip as %d/%m/%y and x-axis date as %d/%m
- d3.js nvd3 issue: display the dollar sign, and the currency format in the tooltip
- Understanding nvd3 x-axis date format
- nvd3 tooltip decimal format
- custom x axis tooltip for nvd3 scatter chart
- how to draw nvd3 simple barchart with x and y axis in angularjs
- Change date format for xAxis in nvd3 chart
- Find the most recent date and output value by group
- D3.js V4 : How to create X axis with time and %H:%M:%S format
- autoscale and format x axis in dimple.js
- How can I control the date format for d3 scaleTime and remove unwanted clock time ticks?
- Show values on Y Axis as it is with Higher and lower limits NVD3 Line Chart
- Adding tooltip and x axis, y axis title to D3.js chart
- nvd3 (d3.js) date format returns incorrect month
- d3.js change format of price and date
- d3 chart is showing some decimal value in the X axis tick, instead of showing the date and time
- Angular nvd3 HorizontalBarChart displayed difference format in the barLine and the holizontalLine
- Add a space between the axis and text with NVD3 charts
- How to force d3's date axis to draw ticks for first and last months that are not full [FIDDLE UPDATED]?
- Cal-HeatMap - How to format date and value in subDomainText cell
- Howto set custom ticks and labels on Y axis in nvd3
- In d3 how can you format a date with single digits for month and year if they are under t0?
- nvd3 python and axis
- nvd3 AngularJS date format issue - non-epoch
- Adding tooltip and focus guides for x and y2 axis on multi-axis linechart in d3
- How to format x axis with date in d3js
- How to place a date in a tooltip when only part of axis ticks with dates are shown? Using D3.js
- Using NvD3 charts, how to get x axis and Y axis label for multichart?
- NVD3 Multi Bar Chart - Add in grid lines and make sure every y axis value shows up
- nvd3 and angular - Unable to fix axis values
More Query from same tag
- Uncaught TypeError: Cannot read property 'albersUsa' of undefined
- SVG textPath not visible after transition on Chrome
- d3js (v4) canvas force layout with text on nodes
- Dynamically resize the d3 tree layout based on number of childnodes
- How to render/ format axes each 6 month with d3.scaleTime?
- Bubble Map with leaflet and D3.js [problem] : bubbles overlapping
- d3.js: add elements according to data-attribute value
- Hard to understanding d3.range.js and d3.scale.linear
- How do you get selected datums in brush "brush" event handler?
- Bullet chart ticks & labels in D3.js
- How to modify Collapsable Tree D3JS: http://bl.ocks.org/d/4339083/
- Getting data for d3 from ArangoDB using AQL (or arangojs)
- d3 v4 line chart data
- A simple scatterplot example in D3.js?
- parseDate for Wireshark extract to use to plot receive window
- Changing one element of an array of arrays with event
- d3.brush does not work in Firefox or Edge when embedded
- Positioning externally loaded svg in D3
- d3 (v4) tree layout and typescript: Property 'x' does not exist on type 'HierarchyNode<IOrgChartNode>'
- Highlight State in Choropleth
- d3.js Molecule Diagram only working on the last element of the object
- Not able Zoom on D3 Group Bar Chart
- Add SVG title to plotly chart before downloading PNG
- Applying css to the ticks and line of an axis
- Convert a value to the existing xScale
- Unable to add text to circles in d3
- SVG: how to replace <html:div> tag by <svg:text> tag to display a tooltip (rectangle width is variable)?
- D3 graph with svg nodes - How to move nodes to arbitrary positions
- d3 Sankey assign fixed x,y position
- An alternative for d3v4 "columns" (I have to use d3v3)