CODEWITHSUNDEEP
javascriptangularjsd3.jsnvd3.js
Ortal Blumenfeld Lagziel
Ortal Blumenfeld Lagziel

Reputation: 2555

nvd3 is there existing way to add a scroller to nvd3 chart?

I am using a nvd3 chart, but if I have a lot of data which is bigger than the chart container's width there is no scroller and I can't find a way to add it.

http://krispo.github.io/angular-nvd3/#/cumulativeLineChart

I tried to add overflow:scroll to the div.chartwrapper wrapper.

<div class="chartwrapper" ng-app="app-origin" ng-controller="ctrl">
    <nvd3 options="options2" data="data2"></nvd3>
 </div>

and to the chart itself

<nvd3 options="options2" data="data2" class="ng-isolate-scope"><svg height="450px" width="100%"

How can I add a scroller to the chart to see all the data I inserted to it?

Upvotes: 0

Views: 1081

Answers (1)

Joao Polo
Joao Polo

Reputation: 2163

You can to use a pair of divs, using fixed width, for example, to define the scroll:

at html:

<div class="outer">
  <div class="inner">
    <nvd3 options="options" data="data" class="inner"></nvd3>
  </div>
</div>

at css:

div.outer { overflow: scroll; }
div.outer .inner { width: 1024px; }

see the plunker based on original sample

Upvotes: 1

Related Questions