nvd3.js

I am trying to bind the datapoints with the onclick event, so that I could display a overlay box with some additional details and links. I'm using the .nv-point class to access the datapoints. The problem is that I'm unable to register the onclick event to those datapoints. Here is the code : d3.selectAll(".nv-point").on("click",function(){ alert("clicked"); //do something more }); Here is the demo in jsFiddle You can easily attach a click handler to the "circle", or node point on a lineChart like this: chart.lines.dispatch.on('elementClick', function(e) { alert("You've clicked on " + e.series

I am currently using NVD3 to make a few line charts. I am wondering if it is possible to make the y axis ticks to always start from 0. Currently it always starts from the lowest y value. I have tried using tickValues but I do not want to change the other values. I have also tried to add a data point with a value of 0, but this seems like a workaround and it affects the way the graph looks. Any ideas? You don't need to add a "dummy" data point, all you need is adjust the input domain of the scale, e.g. something like chart.yAxis.scale().domain([0, maxValue]); Most charts have a forceX and

I'm using nvd3 to plot some series and want to add some arbitrary rectangles to the plot. How can I access the underlying x- and y-scale for the d3 plot so I can transform my rectangles' coordinates into the svg pixel coordinates so that are on the same scale as the existing data: function d3_render(response) { nv.addGraph(function() { var data = response; chart.xAxis .axisLabel('Time (s)') .tickFormat(d3.format(',f')); chart.x2Axis .tickFormat(d3.format(',f')); chart.yAxis .axisLabel('Units normalized') .tickFormat(d3.format(',.2f')); chart.y2Axis .tickFormat(d3.format(',.2f')); d3.select('

I am using NVD3.js multiChart to show multiple lines and bars in the chart. All is working fine, but the x-axis labels is aligned only to the line points, not bars. I want to correctly align labels directly below the bars as it should. But I get this: With red lines I marked where the labels should be. I made jsFiddle : http://jsfiddle.net/n2hfN/ Thanks! As @Miichi mentioned, this is a bug in nvd3... I'm surprised that they have a TODO to "figure out why the value appears to be shifted" because it's pretty obvious... The bars use an ordinal scale with .rangeBands() and the line uses a linear

Is there a way to show an empty chart instead of the "No Data Available" message when there is no data to show? http://jsfiddle.net/sammla/pYWkD/2/ data2 = [ { "key" : "A key" , "values" : [] } ]; Thanks! You can "hack" this by having an empty array that contains an empty array: data2 = [ { "key" : "A key" , "values" : [[]] } ]; The answer provided by Lars works well when you do not want to show the noData message on a chart when its empty. Recently I had charts with content being loaded dynamically. I found a similar question to this Updating with no data does not clear old data from the