d3.js & nvd3.js -- How to set y-axis range

Question

I'm trying to set the y-axis range of the chart from 1-100.

Consulted the API documentation and found a possible solution with axis.tickValues as seen here https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues

However, using the option does not work. Reading further down on the documentation page linked above under axis.tickSize, the following line was spotted

The end ticks are determined by the associated scale's domain extent, and are part of the generated path domain rather than a tick line

So I take it setting the min and max of the range can't be done through the Axis option.

Any ideas on where I can specify the range?

score 79 · Accepted Answer · edited Dec 12 '13 at 18:01

79

Found a solution.

Appending .forceY([0,100]) to the instantiation of the chart forces the axis to take on the range specified in the array.

From the example here http://nvd3.org/livecode/#codemirrorNav

Appending .forceY([0,100]) to the chart variable works.

edited Dec 12 '13 at 18:01

sepans

1,332
13
24

answered Aug 01 '12 at 22:42

Viet

3,048
3
26
33

4

This works for me to expand the range beyond the Max/Min for a line chart, but not for making the range smaller than the data. – arboc7 Aug 06 '12 at 18:04
5

Note: You can use `.forceY(val)` to force the minimum, and the max will stay dynamic. – sean.boyer Feb 21 '14 at 18:47
3

`.forceY()` ensures that the values you give it will appear somewhere on the screen. Any Y values in the dataset will also appear on the screen. You can't use this to force some of the datapoints offscreen. – Peeja May 08 '14 at 18:26
1

`.forceY([min, max])` works fine in multibarcharts. See this [plunkr](http://plnkr.co/edit/FDHhkd2iyZ75lwkPtJbF?p=preview) for reference. It's built on Angular nvd3, but there shouldn't be any difference how forceY works. – Martin Johansson Sep 04 '16 at 21:30

score 32 · Answer 2 · edited May 10 '16 at 08:25

As the name should suggest, this adds the values in the array to your y domain, it does not set the y domain to [0,100]. So if you set this to [0,100] and your data's domain is -10 to 110, the domain will be [-10,110].

Now if you wanted the domain to be [0,100] even if your data is larger you can use chart.yDomain([0,100]) ... BUT usually you want your domain to include or your data, so I highly recommend using chart.forceY instead of chart.yDomain. As you'll see, one of the most common uses for forceY is forceY([0]) to make 0 always in the domain.

Hope that helps you understand what the function is actually doing, and arboc7, this should explain why it doesn't work in making the range smaller than the data set's.

score 10 · Answer 3 · edited May 10 '16 at 08:23

10

For stacked area charts, .forceY([0,100]) does not work. Use instead .yDomain([0,100])

edited May 10 '16 at 08:23

Mosh Feu

24,625
12
74
111

answered Sep 11 '13 at 11:30

Pierre-Yves V.

101
1
3

1

Is there any way to force the range for the stacked chart but still have auto-scaling when you examine a single dataset? e.g. when you click "North America" in the example http://nvd3.org/examples/stackedArea.html – francisbyrne Mar 03 '16 at 02:32
If you have multiple y axes, such as in a multi chart example, then you have to do `yDomain1` and `yDomain2`, etc. See the issue listed here: https://github.com/krispo/angular-nvd3/issues/81 – bwest87 Jun 07 '17 at 22:32

score 7 · Answer 4 · edited May 10 '16 at 08:25

7

If you mean setting the y-domain (the range of numbers that should be displayed) for stacked area charts, this works for me:

nv.models.stackedAreaChart()
  .x(function(d) {...})
  .y(function(d) {...})
  .yDomain([0, maxY])
...

edited May 10 '16 at 08:25

Mosh Feu

24,625
12
74
111

answered Dec 12 '13 at 19:41

sepans

1,332
13
24

score 1 · Answer 5 · answered Feb 22 '16 at 21:32

I had a similar issue and resolved it by explicitly defining the domain in the yScale of the yAxis, i.e.

var yscale = d3.scale.linear()
                     .domain([0,100])
                     .range([250, 0]);
var yAxis = d3.svg.axis()
                  .scale(yscale);

score 0 · Answer 6 · edited Jan 17 '16 at 20:22

0

I have tried like:

chart.forceY([DataMin, DataMax]);

Datamin and Datamax need to calcuate from array. Also inorder to adjust axis points dynamically when filter applies need to custom handle click events of filter like:

$('g.nv-series').click(function() {
   //Calculate DataMin, DataMax from the data array                    
   chart.forceY([DataMin, DataMax]);                        
});

So graph will adjust each time filter applies.

edited Jan 17 '16 at 20:22

Tunaki

116,530
39
281
370

answered Jan 17 '16 at 20:18

Dijo

231
1
2
11

if you just use the default domains and ranges nvd3 will set the min/max automatically based on your data set. and will recalculate when new data is added. – Evan Butler Feb 19 '16 at 17:33

d3.js & nvd3.js -- How to set y-axis range

6 Answers6

Linked