Highstock visual distortion multiple Charts

Question

I am trying to show different charts one on each of the three tabs of the page. The first tab renders perfectly, but the second and third don´t.

Example of first chart ok

Example of second and Third chart not OK

Every time the tab is selected a $(window).trigger('resize'); is executed so the charts resize. So far they do, but the visual glitch, persist.

When I create the charts for the first time I create them individualy:

var graficoOpcCuenta = { chart: { renderTo: 'graficoPorCuenta' }, rangeSelector: { selected: 1 }, title: { text: 'Rentabilidad Cuenta' }, series: [{ data: [], tooltip: { valueDecimals: 2 } }] };
var graficoOpcCliente = { chart: { renderTo: 'graficoPorCliente' }, rangeSelector: { selected: 1 }, title: { text: 'Rentabilidad Cliente' }, series: [{ data: [], tooltip: { valueDecimals: 2 } }] };
var graficoOpcGrupo = { chart: { renderTo: 'graficoPorGrupo' }, rangeSelector: { selected: 1 }, title: { text: 'Rentabilidad Grupo' }, series: [{ data: [], tooltip: { valueDecimals: 2 } }] };

var graficoPorCuenta = new Highcharts.StockChart(graficoOpcCuenta);
var graficoPorCliente = new Highcharts.StockChart(graficoOpcCliente);
var graficoPorGrupo = new Highcharts.StockChart(graficoOpcGrupo);

Any ideas?

I'm currently using Highstock JS v2.1.9

Update:

Setting the width in chart:{..., width: x} just doesn't make it.

I'm using:

• jQuery v2.1.4
• Bootstrap 3.3.5

There is no jQuery UI at all

Update 2

Here is my resize:

function resize() {
    var height = "some value";

    $("#graficoPorCuenta").setGridWidth($("#grillaPorCuenta").width());
    $("#graficoPorCliente").setGridWidth($("#grillaPorCliente").width());
    $("#graficoPorGrupo").setGridWidth($("#grillaPorGrupo").width());

    if ($('#graficoPorCuenta').highcharts() != undefined) {
        $('#graficoPorCuenta').highcharts().setSize($("#grillaPorCuenta").width(), height + 120, doAnimation = false);
        graficoPorCuenta.reflow();
    }
    if ($('#graficoPorCliente').highcharts() != undefined) {
        $('#graficoPorCliente').highcharts().setSize($("#grillaPorCliente").width(), height + 120, doAnimation = false);
    graficoPorCliente.reflow();
    }
    if ($('#graficoPorGrupo').highcharts() != undefined) {
        $('#graficoPorGrupo').highcharts().setSize($("#grillaPorGrupo").width(), height + 120, doAnimation = false);
        graficoPorGrupo.reflow();
    }
}

Also:

$(window).bind('resize', function () {
      resize();
}).trigger('resize');

On Tab change:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    target = $(e.target).attr("href") // activated tab
    if (target == "#tabCuenta") {
        graficoPorCuenta.reflow()
    }
    if (target == "#tabCliente") {
        graficoPorCliente.reflow()
    }
    if (target == "#tabGrupo") {
        graficoPorGrupo.reflow()
    }
    $(window).trigger('resize');
});

Answer 1

It was my bad.

What I was doing wrong:

1. create the charts
2. Hiding the divs that contain the chart that not corresponded to the selected chart tab
3. triggering window resize
4. Visual error created

The correct way in my case was

1. create the charts
2. triggering window resize
3. Hiding the divs that contain the chart that not corresponded to the selected chart tab
4. Correct visual in all charts.

Changing the order made the trick.