HighCharts and idTabs - Charts width not setting properly

Question

I have a webpage with HighCharts and idTabs plugins installed. I just want to show 1 chart at time, so hi got them in multiple tabs. The html code is:

<ul class="idTabs"> 
    <li><a href="#vpPointsGraphWrapper">Points</a></li> 
    <li><a href="#vpKillsDeathsGraphWrapper">Kills and deaths</a></li>
    <li><a href="#vpDamageGraphWrapper">Damage</a></li> 
    <li><a href="#vpBombsGraphWrapper">Bombs</a></li> 
</ul> 
<div id="vpPointsGraphWrapper"><div id="vpPointsGraph"></div></div>
<div id="vpKillsDeathsGraphWrapper"><div id="vpKillsDeathsGraph"></div></div>
<div id="vpDamageGraphWrapper"><div id="vpDamageGraph"></div></div>
<div id="vpBombsGraphWrapper"><div id="vpBombsGraph"></div></div>

Until this point is all okey, the charts have their data, and all is okey except one thing, the width. The chart that is showed by default (vpPointsGraph) has the correct width (100% of the div that contains them), but the others take the width that correspond to the width of the monitor, overflowing out of the wrapper div. I think the problem is that they want to get the wrapper div width, but as its hidden they take the whole screen width. ¿Is there anyway to fix this? Thanks for your answers.

Edit: I solved it, check the next answer for explanation.

I have fixed it, i adjunt the solution as an answer. Thanks anyway. — nnRg, Feb 28 '14 at 13:40

score 0 · Accepted Answer · answered Feb 28 '14 at 13:49

Solution: http://jsfiddle.net/5kLdG/ What i have done its just getting the width of the container i want the chart to fit in, and setting it in the highcharts 'width' parameter. I don't know if its the best solution but it worked for me.

//Get wrapper width
 var width = $('#wrapper').width()
//Points Graph
       var pointsChart = new Highcharts.Chart({
            chart: {
        renderTo: 'vpPointsGraph',
                type: 'line'
            },
            title: {
                text: 'Points'
            },
            xAxis: {
                title: {
                    text: 'Match'
                },
                categories: [1,2,3,4,5,6,7],
        reversed: true
            },
            yAxis: {
                title: {
                    text: 'Points'
                },
            },
            tooltip: {
                crosshairs: true,
                shared: true,
                valueSuffix: ''
            },
            plotOptions: {
                line: {
                    marker: {
                        radius: 4,
                        lineColor: '#666666',
                        lineWidth: 1
                    }
                }
            }, 
    credits: {
                enabled: false
            },
            series: [{
                name: 'Points',
                data: [5,6,7,8,3,6,8]
            }]
        });


//KillsDeaths Graph
        var killsDeathsChart = new Highcharts.Chart({
            chart: {
        renderTo: 'vpKillsDeathsGraph',
                type: 'line',
        width: width
            },
            title: {
                text: 'Kills and Deaths per match'
            },
            xAxis: {
                title: {
                    text: 'Match'
                },
                categories: [1,2,3,4,5],
                reversed: true
            },
            yAxis: {
                title: {
                    text: 'Number'
                },
            },
            tooltip: {
                crosshairs: true,
                shared: true,
                valueSuffix: ''
            },
            plotOptions: {
                line: {
                    marker: {
                        radius: 4,
                        lineColor: '#666666',
                        lineWidth: 1
                    }
                }
            }, 
    credits: {
                enabled: false
            },
            series: [{
                name: 'Kills',
                data: [6,8,2,2,5]
            }]
        });

HighCharts and idTabs - Charts width not setting properly

1 Answers1