Change range for one y axis nvd3/d3

Question

I am currently using the multiChart model and I have two different y Axes. I would like to like to change both of the axes so that they start at 0 because currently they start at the smallest y data point.

I have tried doing the following

chart.yAxis1
tickFormat(d3.format(',.f'))
.domain([0,max_y]);

but that doesnt seem to work

and

.forceY ([0, max_y])

it tells me that there is no forceY function

Any ideas?

Iceboat

Have you found a solution? I'm having the same issue. Thanks! – Sightly

Answer 1

You can force min and max values in NVD3 for line or bar charts, try as below:

chart.bars.forceY([0]);

chart.lines.forceY([0,100]);

Tremolant

This works on the line plus bar chart but does not seem to work on the multi chart. – Lenticular

There is a typo in this response, it should read chart.lines.forceY([0, 100]);. Edited. Useful for me. Thx! – Bordeaux

Answer 2

.domain([0, max_y]) should be used on a scale object, not an axis object.

So:

var yScale = d3.scale.linear().domain([0,max_y])
var yAxis  = d3.svg.axis().scale(yScale)

This should work; if not, you should post what you have as a jsfiddle.

Zanezaneski

Hey, my code uses data points from a database so I'm not sure how I would be able to show you my graphs. I tried doing var yscale1 = d3.scale.linear().domain([0,400000]); but I get Uncaught TypeError: Cannot call method 'linear' of undefined. I am using nvd3 to make my graphs btw, not just d3. – Iceboat

console.log(JSON.stringify(data)) -> copy/paste – Zanezaneski

Answer 3

The only way I found that solves the problem is by adding yDomain1 or yDomain2 in the chart definition

For nvd3:

var chart = nv.models.multiChart()
    .yDomain1([-20, 80]) 
    .yDomain2([-50, 200])

For nvd3 AngularJS:

$scope.dashOptions = {
    chart : {
        type : 'multiChart',
        yDomain1:[-20, 80],
        yDomain2:[-50, 100],

Source: Solution by Alex. in another post

Silber