Highcharts Graph Width Is Incorrect When Scrollbar Is Present, in Bootstrap Fluid Span

Highcharts graph width is incorrect when scrollbar is present, in bootstrap fluid span

The issue is that when page is loaded width of container for Highcharts is different. I think it's due to rendering time (takes more than 1ms), so possible solution is to make sure chart has proper widht nad height after rendering: http://jsfiddle.net/Q5EGX/17/ (see console comments)

setTimeout(function() {
      chart.setSize($("#barchart").width(), $("#barchart").height());
}, 1);

Highcharts Annotation Position/Top Is Incorrect Upon Initial Rendering

This question was answered on GitHub issues here. Basically you have to put an inline style on the image providing height/width so that the annotations module can correctly calculate its size. This resolved the issue for us.

HIghcharts & Bootstrap: Chart on Tab 2 is not appearing. Though First chart is working fine

I've found the answer for the question I've asked above. Please find the solution below:

CSS

<style type="text/css">
      .tab-content .tab-pane .highcharts-container {
          border: 0px;
      }

      .tab-content > .tab-pane {
        display: block;
        height: 0;
        overflow-y: hidden;
      }

    .tab-content > .active {
        height: auto;
    }

    .nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus, .nav-tabs > .active > a:active {
        outline:none;
    }
    </style>
    <style type="text/css">
      #left, #right{
        float: left;
    }
    </style>

HTML

<div class = "row-fluid">
        <div class = "span9">
            <div class = "row-fluid">
                <ul class="nav nav-tabs">
                        <li class = "active">
                            <a data-toggle = "tab" href = "#one">Chart 1</a>
                        </li>
                        <li><a data-toggle = "tab" href = "#two">Chart 2</a></li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane active" id="one" >
                            <div class="left" id="left" style="width: 790px; height: 400px; margin: 0 auto"></div>
                        </div>

                        <div class="tab-pane" id="two" >
                          <br/><br/><br/>
                          <div class="right" id="right" style="width: 790px; height: 400px; margin: 0 auto"></div>
                        </div>
                    </div> 
            </div>
        </div>
    </div>

And I am calling Highcharts inside some function usually. Have a small code snippet below. It is just to mention for few people how it is coming. Showing for only one chart only beginning.

JS

$('#left').highcharts({
              chart: {
                  type: 'column'
              },
              title: {
                  text: 'Some Title'
              },
              xAxis: {
                  type: 'category'
              },
              yAxis: {
                  title: {
                      text: ''
                  }
              }, // Like this further inputs for Highcharts.

NOTE: Above highchart code is only for demonstration and is incomplete.

I hope this solution will help. Thanks for your time guys.

---

Related Topics