Highcharts: le Graphique ne permet pas de redimensionner correctement par rendre l'écran plus petit

Je suis à l'aide de HighCharts 4.0.4 et j'ai un graphique avec une légende personnalisé de cette façon:

<div class="wrapper">
    <div class="element">
        <div id="chart"></div>
    </div>
    <div class="legend">
        Legend
    </div>
</div>

La CSS ressemble à ceci. Le wrapper est un tableau, de sorte que je peux utiliser dans la légende avec table-cell un vertical-align: middle. Je veux avoir les deux 50% de la largeur de la wrapper.

.wrapper {
  display: table;
  width: 100%;
}

.element {
  display: table-cell;
  width: 50%;
}

.legend {
  display: table-cell;
  width: 50%;
  vertical-align: middle;
}

#chart {
  width: 100%;
}

Le problème est que, j'ai créé un JSFiddle ici, "running" du code si la sortie/résultat fenêtre est petite, je vois 50%:50%. Le redimensionnement de la fenêtre de sortie et de le rendre plus grand, tout est ok, l'50%:50% est correct, mais la prise de la fenêtre de sortie les plus petits, le graphique ne permet pas de redimensionner correctement.

J'ai vu quelques solutions avec $(window).resize();. Dans mon cas, j'ai essayé d'utiliser le outerHeight, mais les valeurs des modifications uniquement si je fais la taille de l'écran plus grand. J'ai donc trouvé cette solution qui fonctionne:

$('#chart').highcharts().setSize(
  $(".wrapper").width() / 2, $('#chart').highcharts().height, doAnimation = true
);

Mais est-il aussi une solution qui n'a pas besoin d'utiliser le JavaScript, seulement HTML et CSS?

Au lieu d'utiliser JSFiddle, vous pouvez ajouter votre code directement dans StackOverflow à l'aide de StackOverflow Extrait de Code: blog.stackoverflow.com/2014/09/...

OriginalL'auteur Tim | 2014-09-19