Set zero baseline for D3.js graph

Question

We have a graph that when all data is zero, shows the zero dollar value in the middle of the y-axis, and a few negative values below. It would be better to have the zero at the bottom, with dollar values up the side.

Here's the graph code:

nv.addGraph(function() {
    var chart = nv.models.multiBarChart()
      .transitionDuration(350)
      .reduceXTicks(false)
      .rotateLabels(0)
      .showControls(false)   //Allow user to switch between 'Grouped' and 'Stacked' mode.
      .groupSpacing(0.1)
      .tooltipContent(function (key, y, e, graph) {
          return '<p> Total Cost: $' + graph.value + '</p>';
      })
    ;

    chart.xAxis
        .tickFormat(function(d) { return d3.time.format('%b, %y')(new Date(d)); });

    chart.yAxis
        .tickFormat(function(d) { return '$' + d3.format(',f')(d) });
    d3.select('#hardware_costs_graph svg')
        .datum(exampleData())
        .call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
  });

How can the baseline be changed so that no negative values show?

See http://stackoverflow.com/questions/11766879/d3-js-nvd3-js-how-to-set-y-axis-range — Lars Kotthoff, Aug 26 '14 at 12:34

score 1 · Accepted Answer · answered Aug 26 '14 at 12:48

Thanks Lars. I did search for this answer for a while, and could not find it.

Here is the solution for anyone who needs it.

Added forceY to chart instantiation:

var chart = nv.models.multiBarChart()
      .transitionDuration(350)
      .reduceXTicks(false)
      .rotateLabels(0)
      .showControls(false)   //Allow user to switch between 'Grouped' and 'Stacked' mode.
      .groupSpacing(0.1)
      .tooltipContent(function (key, y, e, graph) {
          return '<p> Total Cost: $' + graph.value + '</p>';
      })
      .forceY([0,5])
    ;

Set zero baseline for D3.js graph

1 Answers1