L'infobulle de Highcharts est cachée derrière d'autres graphiques

Question

Lors de la mise en place de plusieurs graphiques, les infobulles des graphiques supérieurs sont cachées derrière les autres.

J'ai trouvé quelques conseils sur la façon de procéder, mais rien n'y fait. Est-ce qu'il y a un moyen de garder les infobulles en haut des graphiques ?

L'exemple est ici : http://jsfiddle.net/Zw3uM/

Merci beaucoup !

Answer 1

C'est du pur html : tout élément div chargé après (c'est-à-dire apparaissant après sur la page html) sera toujours devant.

Pour que l'info-bulle du premier graphique précède celle du second, chargez le second dans le premier et définissez sa position en y sur la page en utilisant une position absolue ou relative dans le code css :

J'ai modifié leur ordre, en plaçant les conteneur2 en premier dans le html :

<div id="container2" style="height: 200px"></div>
<div id="container1" style="height: 200px"></div>

Définissez ensuite la position de conteneur2 pour être sous le premier (grâce à l'attribut de style top) :

div[id="container2"] {
    position:absolute;
    top:200px;
}

Voici le résultat : http://jsfiddle.net/Zw3uM/3/

Answer 2

Vous pouvez utiliser l'infobulle :

http://api.highcharts.com/highcharts#tooltip.positioner

Answer 3

Le problème est dû au fait que chaque conteneur highchart a son propre contexte d'empilage . Cela est dû au fait que le conteneur highcharts possède à la fois les éléments suivants position : relative y z-index : 0 (css appliqué dynamiquement par la bibliothèque highcharts).

L'indice z de l'info-bulle n'a donc de sens que dans le conteneur Highchart parent.

Pour résoudre ce problème, nous devons remplacer la règle (z-index : 0) pour le conteneur highcharts en utilisant ce qui suit :

.highcharts-container 
{ 
    z-index: auto !important;
    ...
}

De cette manière, tous les conteneurs hightcharts et leurs enfants partageront le même contexte d'empilement et leurs indices z appliqueront l'effet désiré.

Vous pouvez consulter le correctif ici : http://jsfiddle.net/w5bLo1cw/4/