CODEWITHSUNDEEP
d3.jsnvd3.js
topiaruss
topiaruss

Reputation: 11

nvd3 legends overlap

My data contains two curves which are rendered correctly, yet the legends overlap such that the coloured dot and text for the second partially overlap the text for the first. When I click either dot to hide a curve, the overlap resolves immediately, and does not return.

Code below. There are multiple of these on a page. When I omit the xAxis line, the issue resolves, though there is no obvious connection.

d3.json('project_x_data.json', function(data) {
  nv.addGraph(function() {
  var chart = nv.models.lineChart()
                  .x(function(d) { return d[0] })
                  .y(function(d) { return d[1] })
                  .clipEdge(true);

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

  d3.select('#chart-project_x_data svg').datum(data)
    .call(chart);

  nv.utils.windowResize(chart.update);
  return chart;
  });
});

Versions:: Browsers: Firefox, Chrome, on Ubuntu and OSX. Same behaviour on novus/nvd3 latest, and Advael's current merges.

Edit...

The charts are included on a bootstrap tab that is not displayed by default as the page loads. When I resize the browser window when the tab IS selected (charts are visible visible) the legends correct themselves. When I resized the browser window when the tab is NOT selected (charts are hidden), then select the tab, the legends have not corrected themselves. Since the chart is soooo... simple, the issue seems to be that the render is done while the chart is hidden.

Does this help provoke any thoughts?

Upvotes: 1

Views: 2154

Answers (1)

topiaruss
topiaruss

Reputation: 11

This is not an issue anymore.

I now render the graphs using Ajax, only when the tab has become visible. This is enough to make the result reliable and repeatable.

Upvotes: 0

Related Questions