Plotly Chart Height Resize When Using Tabs

I'm using Plotly library to create charts of my data. The issue that I'm encountering with is that when I tried to separate them in different tabs it's not resizing as it's suppose

Solution 1:

I use Plotly with Django and had a similar issue using Bootstrap tabs. When the page is loaded only currently active tab's plots autosized correctly. So my workaround was to use shown.bs.tab event to trigger rerendering of each corresponding graph. The Plotly.Plots.resize or Plotly.relayout(item, {autosize: true}) will do the trick

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (event) {
    var doc = $(".tab-pane.active .plotly-graph-div");
    for (var i = 0; i < doc.length; i++) {
        Plotly.relayout(doc[i], {autosize: true});
    }
})

Works with the latest versions of Edge, Google Chrome and IE11

Solution 2:

It's a year ago, but people may look for this - like I did.

(function() {
        var d3 = Plotly.d3;

        // .content is the class of the parent element.// So I take the size from therevar contentInnerWidth = $('.content').innerWidth();
        var contentInnerHeight = $('.content').innerHeight();

        /* I am selecting the parent element and it has a child 
           element with the class .tab.content, where I append a new 
           div with an id (to call it from the tab-menu), it gets the 
           necessary classes and the width and height of its parent 
           element */var gd3 = d3.select('.content').selectAll('div.tab-content')
            .append('div')
            .attr('id', 'durationDateArea')
            .attr('class', 'tab-pane fade')
            .style({
                width: contentInnerWidth + 'px',
                height: contentInnerHeight + 'px'
            });

        // Building a graphvar gd = gd3.node();

        Plotly.plot(gd, [{
            type: 'bar',
            x: [1, 2, 3, 4],
            y: [5, 10, 2, 8],
            marker: {
                color: '#C8A2C8',
                line: {
                    width: 2.5
                }
            }
        }], {
            title: 'Auto-Resize',
            font: {
                size: 16
            }
        });

        // I encountered some problems with the autoresize of Plotly// This is my fix for it
        $(window).resize(function() {

            // Getting the height of the windowvar windowheight = $(window).height();

            // Apply window height to .content
            $(".content").css({
                "height": windowheight + "px"
            });

            // Getting the width of .contentvar contentInnerWidth = $('.content').innerWidth();

            // Apply width and height to two divs that are created by // Plotly. Fixed some issueswith hidden overfull elements.
            $(".js-plotly-plot").css({
                "width": contentInnerWidth + "px",
                "height": windowheight + "px"
            });
            $(".plotly").css({
                "width": contentInnerWidth + "px",
                "height": windowheight + "px"
            });

            // Applying width and height to a new variable for Plotlyvar update = {
                width: contentInnerWidth,
                height: windowheight
            };
            // Using Plotly's relayout-function with graph-name and // the variable with the new height and widthPlotly.relayout(gd, update);
        });

The structure of the html file is:

<divclass="content"><ulclass="nav nav-tabs"role="tablist"><!-- Navigation Tab Items. All Tabs have to be in here. --><liclass="nav-item active"><aclass="nav-link"data-toggle="tab"href="#durationDateLine"><iclass="fa fa-line-chart"aria-hidden="true"></i> Line Chart
            </a></li><liclass="nav-item"><aclass="nav-link"data-toggle="tab"href="#durationDateArea"><iclass="fa fa-area-chart"aria-hidden="true"></i> Area Chart
            </a></li></ul><!-- Element where the charts will be shown and the JS-file may append the divs to. --><divclass="tab-content"><divid="durationDateLine"class="tab-pane fade in active"></div></div></div>