NVD3/D3 change y axis minimum value

Question

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?

Answer 1

I find this test page to be very useful when figuring out properties on nvd3 charts (applicable even if you're not using angular btw)

https://krispo.github.io/angular-nvd3/#/lineChart

• Click 'Extended'
• Click the + symbol next to forceY
• Type in a value like -5 and then add it to immediately see the effect (the sample graph already has zero shown).

Answer 2

Most charts have a forceX and forceY functions which take a array of values. You can use it like this:

  var chart = nv.models.lineChart();
  chart.forceX([0, 10])
  chart.forceY([-1, 1])

Which will ensure that on your xAxis you are always showing at least 0 and 10, but won't restrict the domain if you manipulate it directly. That is if you do something like:

chart.yAxis.scale().domain([0, maxValue]);

and your data has negative X values that won't show on your chart because they'll fall outside of the specified domain, but they will, if you use forceX.

Answer 3

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]);