CODEWITHSUNDEEP
javascriptd3.jsnvd3.js
Siva
Siva

Reputation: 1276

NVD3/D3 change y axis minimum value

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?

Upvotes: 14

Views: 21616

Answers (4)

besch
besch

Reputation: 45

You can set only min value by chart.forceX(0)

Upvotes: 2

Simon_Weaver
Simon_Weaver

Reputation: 145910

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).

Upvotes: 2

WolfgangCodes
WolfgangCodes

Reputation: 1269

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.

Upvotes: 30

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

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

Upvotes: 10

Related Questions