L'overflow del tooltip di Highcharts è nascosto

Question

Il mio problema è che quando l'area di disegno del grafico è più piccola di un suggerimento di un diagramma alto, una parte del suggerimento è nascosta dove trabocca l'area di disegno del grafico.

Desidero che il tooltip sia sempre visibile, indipendentemente dalle dimensioni dell'area di disegno del grafico.

Nessuna impostazione CSS ha aiutato e nessuna impostazione z-index più elevata ha aiutato entrambi.

Ecco il mio esempio ... http://twitpic.com/9omgg5

Ogni aiuto sarà per lo più apprezzata.

Grazie.

Answer 1

OK, scusa per il ritardo. Non sono riuscito a trovare una soluzione migliore, ma ho trovato una soluzione alternativa.

Ecco quello che ho fatto e quello che suggerisco a tutti di provare:

Impostare la proprietà tooltip.useHTML true (ora è possibile avere un maggiore controllo con HTML e CSS). Come questo:

tooltip: { 
    useHTML: true  
} 

Desetta tutte le peoperties tooltip predefiniti che possono avere qualcosa a che fare con le funzionalità di default tooltip. Ecco quello che ho fatto ...

tooltip: {       
    shared: false, 
    borderRadius: 0, 
    borderWidth: 0, 
    shadow: false, 
    enabled: true, 
    backgroundColor: 'none' 
} 

Assicurarsi che la proprietà css del vostro contenitore grafico "troppo pieno" è impostato su visibile. Assicurarsi inoltre che tutti gli elementi DOM (div, section, ecc ....) che contengono il contenitore del grafico abbiano anche la proprietà "overflow" css impostata su "visible". In questo modo ti assicurerai che il tuo tooltip sarà sempre visibile in quanto trabocca suo genitore e gli altri "antenati" (è questo un termine corretto? :)).

Personalizza il tuo formattatore di formattazione come desideri, utilizzando lo stile CSS standard. Ecco quello che ho fatto:

tooltip.formatter: { 
    < div class ="tooltipContainer"> Tooltip content here </div> 
} 

---

Questo è come tutto appare come:

tooltip: {       
    tooltip.formatter: { 
     < div class ="tooltipContainer"> Tooltip content here </div> 
    }, 
    useHTML: true, 
    shared: false, 
    borderRadius: 0, 
    borderWidth: 0, 
    shadow: false, 
    enabled: true, 
    backgroundColor: 'none' 
} 

Se si dispone di una soluzione migliore, si prega di inviare.

Answer 2

Questo css mi ha aiutato:

.highcharts-container { overflow: visible !important; } 

Answer 3

So che la domanda è vecchia, ma volevo solo condividere la mia soluzione, si basa sugli altri due risposte, ma penso che si ottiene un risultato migliore, guardando con questo codice:

opzioni Tooltip:

tooltip: { 
    useHTML: true, 
    shared: false, 
    borderRadius: 0, 
    borderWidth: 0, 
    shadow: false, 
    enabled: true, 
    backgroundColor: 'none', 
    formatter: function() { 
     return '<span style="border-color:'+this.point.color+'">' + this.point.name + '</span>'; 
    } 
} 

CSS:

.highcharts-container { 
    overflow: visible !important; 
} 

.highcharts-tooltip span>span { 
    background-color:rgba(255,255,255,0.85); 
    border:1px solid; 
    padding: 2px 10px; 
    border-radius: 2px; 
} 

#divContainerId .highcharts-container{ 
    z-index: 10 !important; /*If you have problems with the label hiding behind some other div or chart play with z-index*/ 
} 

Answer 4

Aggiungendo semplicemente questo CSS ha lavorato nel mio caso (minicharts nelle celle della tabella):

.highcharts-container svg { 
    overflow: visible !important; 
} 

L'opzione tooltip useHtml non era necessaria:

tooltip: { 
    useHTML: false 
} 

funziona sia su IE8/9 & FF33.1 (FF stava causando problemi).

Answer 5

Recentemente ho avuto lo stesso problema, ma con il contenitore di bootstrap! (bs3)

Nessuna di queste soluzioni ha funzionato ma l'ho trovata da sola.

La sua causa di bootstrap proprietà _normalizer

svg:not(:root) { 
    overflow: hidden !important; 
} 

Quindi aggiungere sia:

.highcharts-container, svg:not(:root) { 
    overflow: visible !important; 
}