6

I'm using d3.js charts in one of my applications. Here they are in this image See Charts

For Y axis on Money chart (See in the Image), I want maximum value rounded to 400, no matter what maximum bar size is here it is $358.72, but I want to keep bar at 358.72 but on Y Axis it would be 400 Limit.

Code for it is here

tradesChart = [ 
      {
        key: "Cumulative Return",
        values: [
                        {
            "label" : "6E",
            "value" : 100       },
                    {
            "label" : "NG",
            "value" : 100       },
                    {
            "label" : "TF",
            "value" : 67        }        ]
      }
    ];
        nv.addGraph(function() {

      var chart = nv.models.discreteBarChart()
          .x(function(d) { return d.label })
          .y(function(d) { return d.value/100 })
          .staggerLabels(true)
          .showValues(true)
          .valueFormat(d3.format('.0%'))

      chart.yAxis.tickFormat(function(d) { return d3.format('d')(d*100) + '%'; });

      d3.select('#chart-trades svg')
        .datum(tradesChart)
        .transition().duration(500)
        .call(chart);

      nv.utils.windowResize(chart.update);

      return chart;
    });

Kindly Help me to solve this out

3 Answers 3

16

You need to modify the domain of the Y-axis scale. Usually it is derived from the maximum value of the data with a statement like the following:

yScale.domain([0, d3.max(data, function (d) { return d.v; }) ]);

In your case, you should modify it to be more like this instead:

yScale.domain([0, 400]);

Alternatively, if you want to set the maximum value from the data or a minimum static value, you could do something like the following:

yScale.domain([0, d3.max(data, function (d) { return d.v > 400 ? d.v : 400; }) ]);

A full example jsfiddle is here.

That's how to do it with D3.js, I'm not familiar with the venerable nvd3.js lib, so I'm not sure how to access the scale, but i'll take a look and see if I can find it.

2
  • Thanks that worked, but one more quetion, how can I dynamically set ranges using this. I already tried this d3.max(data, function (d) { return d.v; }) but not working..
    – Nawaz
    Feb 18, 2013 at 11:55
  • d3.max will work for setting the maximum value in the data. However, if you want to use the max of the actual data or a static value (400 for example) you could do it with something like: yScale.domain([0, d3.max(data, function (d) { return d.v > 400 ? d.v : 400; }) ]); I updated the fiddle to show this technique at jsfiddle.net/activescott/69cwn/32 Feb 18, 2013 at 22:32
1

I use nvd3 and for me this worked instead:

nv.models.discreteBarChart().yDomain([0,400])

I could'nt get it to work with yScale.domain

0

Force Y

List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). The numbers tell the d3.js the values to use in the scale, rather than d3.js determining the values.

Datatype: Array of Numbers (i.e. [0, 50]

http://cmaurer.github.io/angularjs-nvd3-directives/line.chart.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.