NVD3 Chart responsive issue

Question

NVD3 Responsive issue

I have code from my second page where I used the exactly same chart like here. But on that page it is responsive and I am trying to figure out why the chart is not responsive here.

  var colors = ["rgba(74, 210, 255, .8)", "rgba(85, 172, 238, .8)", "rgba(205, 32, 31, .8)"];
  d3.scale.colors = function() {
        return d3.scale.ordinal().range(colors);
    };
  
  var colors = d3.scale.colors();
    /*var colors = d3.scale.category20();*/ 
    var keyColor = function(d, i) {return colors(d.key)};  
  
    var chart;
    nv.addGraph(function() {
        chart = nv.models.stackedAreaChart()
            .useInteractiveGuideline(true)
            .x(function(d) { return d[0] })
            .y(function(d) { return d[1] })
            .showControls(false)
            .showYAxis(true)
            .showLegend(false)
            .rightAlignYAxis(true)
            .controlLabels({stacked: "Stacked"})
            .color(keyColor)
            .duration(500);

        chart.xAxis.tickFormat(function(d) { return d3.time.format('%a')(new Date(d)) });
        chart.yAxis.tickFormat(d3.format('f'));

        chart.legend.margin({
                        top: 30
                    });

        d3.select('#chart1')
            .datum(histcatexplong)
            .transition().duration(1000)
            .call(chart)
            .each('start', function() {
                setTimeout(function() {
                    d3.selectAll('#chart1 *').each(function() {
                        if(this.__transition__)
                            this.__transition__.duration = 1;
                    })
                }, 0)
            });

        nv.utils.windowResize(chart.update);
        return chart;
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div class="slide1">
   <div class="col-xs-12" id="margin-chart">
      <svg id="chart1" style="width: 100%; height: 300px;"></svg>
   </div>
</div>

Not that it is the issue, but it would be better to style it using your CSS file, and by using em-dashes rather than pixels for sizing as it scales to the viewing window: `#chart1 { width: 100%; height: 30em; }` You also might try using inspect element to see what the margin and padding values are for the chart itself, and manually adjusting them using CSS. — CSS, Oct 30 '15 at 21:50
I already inspected the element and everything show like without problem.. Windows are 100% and also svg.. But the is a problem in the — liborza, Oct 30 '15 at 21:52
I tried it but it the same problem with that.. everything shows me it responsivet set up for 100% of window size but i seen the is set up for 15px but i cannot to change it.. But when i set up like `#chart1 { width: 25em; height: 25em; }` it works but when i wanna set it to be responsive it doesnt work with that.. — liborza, Oct 30 '15 at 22:01
If you can manually change the width of the chart, then utilize media queries to set size limits. This tutorial should help: https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries — CSS, Oct 30 '15 at 22:08
I know where is problem... this window with the chart should show after click on the button but when i set the window with graph top `display: none;` and after then with JQ `.slideToggle()` the chart still be small.. Is there any way hot to do that.. i need it to be hidden and after then click on the button and show that.. — liborza, Oct 30 '15 at 22:13
Then I would say initialize your CSS with `#margin-chart { visibility: none; }` and using the `onclick` directive, use a ` document.getElementById('margin-chart').style.display = 'block';` to reveal it after data is loaded. — CSS, Oct 30 '15 at 22:17
I dont really know where should i add it : [**CodePen**](http://codepen.io/anon/pen/LprQJB) — liborza, Oct 30 '15 at 22:26
I would suggest inserting it before the calls to slideToggle in your JS file. That would be line 2 (addition, not replace) of your CodePen JS file. Just noticed I used `visibility: none;` rather than `display: none;`. The latter is the correct. Also I noticed you put it on your `.slide1` class rather than the id. Generally the id is more mutable when attempting to alter attributes. Attaching an attribute like display to a class requires you to step through the elements list to find it, especially when it doesn't have an id associated with it. — CSS, Oct 30 '15 at 22:41
If i set the visibility none... its hidden and when the JS is loaded it just show — liborza, Oct 30 '15 at 23:05

score 3 · Accepted Answer · answered Nov 04 '15 at 14:31

3

You need to call chart.update() when your slideToggle function finishes to make nvd3 redraw the chart to the new dimensions.

I.e.:

$('#chart').slideToggle(function() {
    chart.update();
});

answered Nov 04 '15 at 14:31

johanj

223
3
9

score 0 · Answer 2 · edited Aug 10 '16 at 19:44

I used the .animate function.

    $("#slide").click(function () {
      if ($('.slide1').hasClass('showtable')) {
          $('.slide1.showtable').animate({height: 300}, 500).removeClass('showtable');
      } else { 
          $('.slide1').animate({height: 0}, 500)
          $('.slide1').addClass('showtable');
      }
    });

.slide1 {
    position: relative;
    width: 100%;
    overflow: hidden;
    right: 25px;
}

.slide1.showtable {
    height: 0;
}

NVD3 Chart responsive issue

NVD3 Responsive issue

2 Answers2

Linked