Highchart issue when added into bootstrap carousel

Question

I was trying to add a charts using Highcarts on a bootstrap carousel. I added just two charts and put it inside two different slider and when I run it, the first slide looks okay but when in the next slide, the width of the chart became small. I tried other workarounds available which I found in here but no joy.

HTML:

<div id="chart-slider" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
   <ol class="carousel-indicators">
      <li data-target="#chart-slider" data-slide-to="0" class="active"></li>
      <li data-target="#chart-slider" data-slide-to="1"></li>
   </ol>

   <!-- Wrapper for slides -->
   <div class="carousel-inner" role="listbox">
      <div class="item active">
      <div id="chart-two" class="chart-container"></div>
   </div>

   <div class="item" class="chart-container">
       <div id="chart-three"></div>
   </div>
  </div>

score 0 · Answer 1 · answered Nov 18 '16 at 07:16

0

I would try to put the charts in simple plain HTML file, then embed it like an iframe in Bootstrap Carousel, for example:

<div class="carousel-inner" role="listbox">
      <div class="item active">
      <iframe src="your-chart1.html"></iframe>
      </div>
      <div class="item" class="chart-container">
      <iframe src="your-chart2.html"></iframe>
      </div>
</div>

answered Nov 18 '16 at 07:16

Bud Damyanov

30,171
6
44
52

1

nice Idea! but I managed to fix it by binding the slide event to highcharts `reflow()` – claudios Nov 18 '16 at 14:10
@claudios It would be great if you will post your solution and accept it, so the question will not remain open. – morganfree Nov 18 '16 at 15:45
@morganfree, yes I'll post it in here. Thanks – claudios Nov 19 '16 at 04:56

Highchart issue when added into bootstrap carousel

1 Answers1