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?

Russom

Answer 1

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

Victualage

Is there any way to get the maxValue of the chart which the plot displays? I am using nvd3 boxplot and am not displaying the outliers. So I would like to use that max value calculated by the chart as the upper limit. – Celandine

You can get the maximum value from your data. – Victualage

Is there anything similiar in ngx charts...I want to set min y axis value to 5 and max should be automatic. I used yScaleMin=5 but up the axis its value is decreasing to 0 like 5,4,3,2,1,0 which I dont want – Haircut

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.

Apartment

I'm trying to set the scale but it isn't working-- e.g.: chart.y1Axis.scale().domain([0, maxValue]) .tickFormat(d3.format(',f')); – Juncaceous

When you call update(), it might be clobbering the values you set directly. – Apartment

Small addition to the answer: I wanted to set only the minimum value on the yAxis, the maximum value should be set automatic. I found out, that if you call forceY with only a single value instead of the array for [min,max] setting, nvd3 sets this value as minimum and calculates the maximum by itself. TL;DR -> Use forceY(0) to set the minimum yAxis Value to 0 and let the maximum calculate by nvd3 :) – Arrangement

@Arrangement Thanks a ton. You should convert your comment to an answer. Your comment should be voted as the right answer. – Lachrymal

Perhaps there was a change since answered... I had to pass it as .forceY([0]) for it to set the minimum to 0. – Bold

for me it always needs an array with n elements where n>0 in order to have any effect hence I need max which is inconvenient with dynamic data :( this seems to be inconsistent behaviour across versions) – Woken

Answer 3

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

Exterminate

It's good to note that this does not work for multi charts. Been bashing my head against the wall trying to figure out why this does not work for my chart before I had that realization – Miquelmiquela

Answer 4

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

Shaker