Home Forums Chart Support Resize issue using JQuery Tabs

Resize issue using JQuery Tabs

Viewing 3 posts - 1 through 3 (of 3 total)
  • #20417

    Hi All.

    I’m testing canvasjs charts and I’m trying to see how well they integrate with JQuery tabs. I am having some sizing issues when I put my canvasjs charts into the jquery tabs. I know this is related to the load order when using JQuery tabs, i.e., if the chart is rendered before the tab, then the chart can’t see any width/ height dimensions, therefore, uses the default settings.

    I’ve read very similar posts to mine that are already on this forum, so apologies for posting something similar. However, I have tried to use the other posts to fix my problem, but to no avail.

    I’ve included some of my code snippets below (unfortunately I’m unable to use JSFiddle in work). Please could someone help.

    I have 3 tabs, and I have my charts in the 3rd tab. But when I click on the 3rd tab the charts do not have the size settings I have assigned in the DIV containers. However, when I put the charts in the 1st tab, they work fine. I also have a JQuery Datatable in the 2nd tab, but I don’t believe this is causing any trouble.

    Many thanks for any help.


    var options1 = {
    // chart options
    var options2 = {
    // chart options
                        var charts = [];
                        var charts2 = [];
                        $(function () {
                              .on('tabsactivate', function (event, ui) {
                                  var index = ui.newTab.index();
                        var chart1 = new CanvasJS.Chart("chartContainer", options1);
                        var chart2= new CanvasJS.Chart("chartContainer2", options2);
    <div id="tabs">
        <ul style="font-size: 20px;">
            <li><a href="#tabs-1" data-tab="1">Info</a></li>
            <li><a href="#tabs-2" data-tab="2">Data</a></li>
            <li><a href="#tabs-3" data-tab="3">Charts</a></li>
        <!-- Start Tab 1 -->
        <div id="tabs-1" data-content="1">
            <p>info here</p>
        <!-- End Tab 1 -->
        <!-- Start Tab 2 -->
        <div id="tabs-2" data-content="2">
                            <table id="data_table" class="table_a smpl_tbl">
                                    <tr style="font-size:small; font-weight: bold;">
                                        <td>Completed Date</td>
                                        <th>Completed Date</th>
        <!-- End Tab 2 -->
        <!-- Start tab 3-->
        <div id="tabs-3" data-content="3">
                            <div id="chartContainer" style="width: 100%; height: 370px;"></div><br />
                            <div id="chartContainer2" style="width: 100%; height: 400px;"></div>
        <!-- End tab 3-->


    ui.newTab.index() gives you the index of the current tab, which is 2 in this case. However you are trying to access charts[index] and charts2[index], i.e. charts[2] and charts2[2] which doesn’t exists as the length of both charts and charts2 is 1. Rendering chart1 and chart2 (or charts[0] and charts2[0]) on ‘tabsactivate’ should work fine in this case. Please take a look at this updated jsfiddle.

    Still, if you are facing any issue please create a jsfiddle with sample data and share it with us so that we can understand your code better and help you out.

    Vishwas R
    Team CanvasJS


    Hi Vishwas

    This has helped, thank you.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.