1

In my chart here, if you can notice, it is missing grid lines for the first 4 and last 4 dates.

I tried doing:

.ticks(data[0].length)

but it didnt help.

What am I missing?

jsFiddle

Rahul Desai
  • 15,242
  • 19
  • 83
  • 138
  • The problem is with the width of the chart. When the chart resizes it automatically adjust the `tick`. NVD3 multiBarChart has a method called `reduceXTicks` to handle that, unfotunately not with lineChart. – shabeer90 Jul 02 '14 at 11:12
  • @shabeer90 Thanks! If I increase the width to `4800px`, I can see the complete grid. Is there any hack around this so that the full grid is shown at any width? – Rahul Desai Jul 02 '14 at 12:02
  • Your code currently has `nv.utils.windowResize(chart.update);` which automatically resizes the the chart according to the window. Try without that line. – shabeer90 Jul 02 '14 at 12:09
  • @shabeer90 That didnt change anything. :( – Rahul Desai Jul 02 '14 at 12:14

1 Answers1

3

Adding .showMaxMin(false) fixes the problem.

      chart.xAxis
       .showMaxMin(false)
       .axisLabel("My X-Axis")
       .tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });

Working example is here

Osman Mazinov
  • 1,436
  • 11
  • 33
  • Thanks! Any idea about this? http://stackoverflow.com/questions/24544859/how-to-update-nvd3-line-chart-with-additional-series – Rahul Desai Jul 03 '14 at 04:28
  • Maybe these links will be helpful: [NVD3 line chart with realtime data](http://stackoverflow.com/q/12548640/2697673) [Real time line graph with nvd3.js](http://stackoverflow.com/questions/15330390/real-time-line-graph-with-nvd3-js) [Update existing chart with new data](https://github.com/novus/nvd3/issues/26) – Osman Mazinov Jul 03 '14 at 07:56
  • I would like to have MaxMin as well as gridlines at the end. Any ideas? – sanket1729 Dec 01 '17 at 07:12