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

javascript d3.js nvd3.js
Viet picture Viet · Aug 1, 2012 · Viewed 64.9k times · Source

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?

Answer

Viet picture Viet · Aug 2, 2012

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.

Related questions

nvd3 piechart.js - How to edit the tooltip?

I'm using nvd3's piechart.js component to generate a piechart on my site. The provided .js file includes several var's, as follows: var margin = {top: 30, right: 20, bottom: 20, left: 20} , width = null , height = null , showLegend = true , color = nv.utils.defaultColor() , tooltips = …

Read More
How to customize color in pie chart of NVD3

I am trying to use NVD3 http://nvd3.org/livecode/#codemirrorNav a pie chart. But i want to change the default color. How do i change the color. i am not able to do it.

Read More
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 …

Read More