NVD3.js scatter

Question

Hello I am trying to make a scatterChart with the nvd3.js libary. Now the thing is that I want to have both axis the same width/height. But even if both the height and width in css as in code are set to the same height the y axis stays longer in height.

JS:

var chart = nv.models.scatterChart()
                            .width(300)
                            .height(300)
                            .showXAxis(true)
                            .showYAxis(true)
                            .forceX([-100,100])
                            .forceY([-100,100])
                            .tooltips(true)
                            .showLegend(false)
                            .tooltipContent(function(){
                                return 'clock';
                            });

css:

#main-chart {
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

html:

 <div class="container" ng-controller="film_factor_controller">
  <svg bubble-chart id="main-chart"></svg>

hope someone can help me out

possible duplicate of [how to set height and width of nvd3 chart](http://stackoverflow.com/questions/16474988/how-to-set-height-and-width-of-nvd3-chart) — shabeer90, Dec 11 '13 at 15:38

score 0 · Answer 1 · answered Dec 15 '13 at 15:16

From the source code you may find that, the forceX and forceY are set to the chart with D3's domain() API. So I guess that this nvd3 API here won't really 'force', as the real length will be calculated by d3 and that is determined by the input range.

Maybe you need to calculate the domain by your self so that the maxY and maxX are exactly locate at the edge of your axis.

NVD3.js scatter

1 Answers1