NVD3/D3 change y axis minimum value

javascript d3.js nvd3.js
Siva picture Siva · Jun 12, 2013 · Viewed 20.9k times · Source

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?

Answer

WolfgangCodes picture WolfgangCodes · Jun 13, 2013

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.

Related questions

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

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 …

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