CODEWITHSUNDEEP
javascriptsvgd3.jsnvd3.js
NoMachine
NoMachine

Reputation: 167

NVD3 Scatter Chart Circle Radius

I was wondering how I can set minimum and maximum radii of the circles in an NVD3 scatter chart.

NVD3 Scatter: http://nvd3.org/ghpages/scatter.html

Upvotes: 4

Views: 2276

Answers (3)

Alfin Paul
Alfin Paul

Reputation: 1621

nv.addGraph(function() {
  var chart = nv.models.scatterChart()
                .showDistX(true)
                .sizeRange([100, 1000]) /*** Chart Circle Range ****/
                .showDistY(true)
                .color(d3.scale.category10().range());


  chart.xAxis.tickFormat(d3.format('.02f'));
  chart.yAxis.tickFormat(d3.format('.02f'));

  d3.select('#chart svg')
      .datum(data(4,40))
      .transition().duration(500)
      .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});

Use this this link or apply the above code into this LINK

.sizeRange([minArea, maxArea])

example: .sizeRange([100, 1000])

Upvotes: 2

Nadim
Nadim

Reputation: 43

As of 1.7.1, call .pointRange([minArea,maxArea]) .

Upvotes: 4

AmeliaBR
AmeliaBR

Reputation: 27544

Call .sizeRange([minArea, maxArea]) on your chart object. Note that "size" is proportional to area, not radius, so you need to use the square of the maximum/minimum radius (adjusted by pi/2 if you want to be precise).

Upvotes: 8

Related Questions