Kendo chart not covering the full width on the bootstrap card which is inside the tab

Question

I am loading the kendo vue ui chart and displaying that in bootstrap cards (which is inside the bootstrap tab).

But for some reason, the charts is not covering the entire width of the cards and it is being rendered being so small.

There is already the style as: width: 100%; height: 100%; in the SVG of the chart but that doesn't expand.

But while I change something on code and the browser refreshes the dom, then only it occupies the full width. But, after the refresh or f5 keypress, it will be the same again.

I have also tried using the props: chart-area="chartArea", and set the width. that expand the chart but doesn't resize on window width decreased.

Why it is not rendering properly initially? What's the issue causing this and what could be the possible workaround for this?

new Vue({
  el: "#vueapp",
  data: function() {
    return {
      series: [{
        name: "Gold Medals",
        data: [40, 32, 34, 36, 45, 33, 34, 83, 36, 37, 44, 37, 35, 36, 46],
        color: "#f3ac32"
      }, {
        name: "Silver Medals",
        data: [19, 25, 21, 26, 28, 31, 35, 60, 31, 34, 32, 24, 40, 38, 29],
        color: "#b8b8b8"
      }, {
        name: "Bronze Medals",
        data: [17, 17, 16, 28, 34, 30, 25, 30, 27, 37, 25, 33, 26, 36, 29],
        color: "#bb6e36"
      }],
      valueAxis: [{
        max: 180,
        line: {
          visible: false
        },
        minorGridLines: {
          visible: false
        }
      }],
      categoryAxis: {
        categories: [1952, 1956, 1960, 1964, 1968, 1972, 1976, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012],
        majorGridLines: {
          visible: false
        }
      },
      tooltip: {
        visible: true,
        template: "#= series.name #: #= value #"
      }
    }
  }
})

<!--Load Kendo styles from the Kendo CDN service-->
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.default.min.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-bootstrap@latest/dist/all.css" />

<!--Load the required libraries - jQuery, Kendo, Babel and Vue-->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<!--Load the required Kendo Vue package(s)-->
<script src="https://unpkg.com/@progress/kendo-charts-vue-wrapper/dist/cdn/kendo-charts-vue-wrapper.js"></script>


<div id="vueapp" class="vue-app">
  <div class="container py-2">
    <div class="row">
      <div class=col-md-4>
        <b-card title="Card Title" img-src="https://picsum.photos/600/300/?image=25" img-alt="Image" img-top tag="article" style="max-width: 20rem;" class="mb-2">
          <b-card-text>
            Some quick example text to build on the card title and make up the bulk of the card's content.
          </b-card-text>

          <b-button href="#" variant="primary">Go somewhere</b-button>
        </b-card>

      </div>
      <div class="col-md-8">
        <b-tabs content-class="mt-3">
          <b-tab title="First" active>
            <p>I'm the first tab</p>
          </b-tab>
          <b-tab title="Olypic Medals won by USA">
            <div class="card">
              <div class="card-body">
                <kendo-chart :title-text="'Olympic Medals won by USA'" :legend-visible="false" :series-defaults-stack="true" :series-defaults-type="'bar'" :series="series" :category-axis="categoryAxis" :value-axis="valueAxis" :tooltip="tooltip" :theme="'sass'">
                </kendo-chart>
              </div>
            </div>
          </b-tab>
        </b-tabs>
      </div>
    </div>
  </div>
</div>

Update:

This clearly seems the problem with bootstrap, Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?

But I am not sure how to solve this issue. The full width of the chart is displayed only on when: <b-tab> is active.

Demo: https://stackblitz.com/edit/dnnvoa-2op3gm?file=index.html

Now, how to make the chart width of 100% of the cards when it is not active or active in either way.

Adding the following css also doesn't seem to work:

  .tab-content>.tab-pane:not(.active),
        .pill-content>.pill-pane:not(.active) {
            display: block;
            height: 0;
            overflow-y: hidden;
        }

score 0 · Accepted Answer · answered Sep 08 '20 at 10:47

By setting the lazy prop on the component worked perfectly well.

Example available here:

https://bootstrap-vue.org/docs/components/tabs#tabs

<b-tabs content-class="mt-3">
  <!-- This tabs content will always be mounted -->
  <b-tab title="Regular tab"><b-alert show>I'm always mounted</b-alert></b-tab>

  <!-- This tabs content will not be mounted until the tab is shown -->
  <!-- and will be un-mounted when hidden -->
  <b-tab title="Lazy tab" lazy><b-alert show>I'm lazy mounted!</b-alert></b-tab>
</b-tabs>

Kendo chart not covering the full width on the bootstrap card which is inside the tab

1 Answers1