Przełęcz highcharts jest ukryta

Question

Mój problem polega na tym, że gdy obszar rysowania wykresu jest mniejszy niż etykieta podpowiedzi highchart, część etykiety narzędzia jest ukryta tam, gdzie przepełnia obszar rysowania wykresu.

Chcę, aby etykieta była widoczna przez cały czas, bez względu na rozmiar obszaru rysowania wykresu.

Nie pomogło ustawienie CSS i nie pomogło żadne wyższe ustawienie indeksu Z.

Oto mój przykład ... http://twitpic.com/9omgg5

Każda pomoc będzie głównie apreciated.

Dziękuję.

Answer 1

OK, przepraszam za opóźnienie. Nie mogłem znaleźć lepszego rozwiązania, ale znalazłem obejście.

Oto co zrobiłem i co ja proponuję wszystkim spróbować:

Ustaw właściwość tooltip.useHTML do prawdziwej (teraz można mieć większą kontrolę z HTML i CSS). Tak:

tooltip: { 
    useHTML: true  
} 

Usuń wszystkie domyślne peoperties etykietka, że może mieć coś wspólnego z funkcjonalności domyślnego podpowiedzi. Oto co zrobiłem ...

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

Upewnij się, że własność css wykresie kontenera „przepełnienie” jest ustawiony jako widoczny. Upewnij się również, że wszystkie elementy DOM (div, section, etc ....), które przechowują twój kontener wykresu, mają również właściwość css "overflow" ustawioną na "visible". W ten sposób upewnisz się, że twoja podpowiedź będzie widoczna przez cały czas, ponieważ przepełnia ona rodzica i jego innych "przodków" (Czy to jest poprawny termin? :)).

Dostosuj swój edytor etykiet narzędziowych, używając standardowej styli CSS. Oto co zrobiłem:

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

---

Jak to wszystko wygląda:

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

Jeśli masz lepsze rozwiązanie, proszę pisać.

Answer 2

Ten css pomógł mi:

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

Answer 3

Wiem, że pytanie jest stary, ale ja po prostu chciałem podzielić się moją rozwiązanie, to na podstawie dwóch innych odpowiedzi, ale myślę, że można uzyskać lepsze wyglądający wynik z ten kod:

opcje 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

Dodawanie prostu ten CSS pracował w moim przypadku (minicharts w komórkach tabeli):

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

Opcja podpowiedzi useHtml nie było konieczne:

tooltip: { 
    useHTML: false 
} 

działa zarówno IE8/9 & FF33.1 (FF powodował problemy).

Answer 5

Niedawno dostałem ten sam problem, ale z pojemnikiem bootstrap! (bs3)

Żadne z tych rozwiązań nie zadziałało, ale znalazłem je samodzielnie.

Jego powodu bootstrap właściwości _normalizer

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

Więc dodać obie:

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