CODEWITHSUNDEEP
javascriptd3.jsnvd3.js
Ace Dimasuhid
Ace Dimasuhid

Reputation: 1062

nvd3 set scale from big to small

I have a simple line graph where the Y value spans from 0-100. I want to reverse the Y range to go instead to 100-0. Graph code is below:

    nv.addGraph(function() {
      var values = that.getGraphValues();
      console.log(values);
      var chart = nv.models.lineChart()
          .forceY([100, 1]);

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

      chart.yAxis
          .axisLabel('Ranking')
          .tickFormat(d3.format(',r'));

      d3.select('#chart svg')
          .datum(values)
        .transition().duration(500)
          .call(chart);

      nv.utils.windowResize(function() { d3.select('#chart svg').call(chart) });

      return chart;
    });

Upvotes: 2

Views: 1228

Answers (2)

pCyril
pCyril

Reputation: 134

If you happen to use the Angular NVD3 wrapper, the way to set the custom message is through chart options, simply:

$scope.options = {
  chart: {
  ...
  yDomain: [100, 1],
  ...
  }
};

Upvotes: 1

AmeliaBR
AmeliaBR

Reputation: 27544

You need to set the domain of the graph explicitly. In D3 terms "domain" is the expected extent of the data. If you don't set it yourself, it is calculated as [minValue, maxValue]. But you can explicitly set it to anything, even such that the first number is bigger than the second number.

var chart = nv.models.lineChart()
            .yDomain([100,0]);

Upvotes: 3

Related Questions