Dostosowywanie tekstu do Highchart Tooltip Maksymalna szerokość

Question

Chcę dostosować pionowy tekst w mojej podpowiedzi highcharts (szerokość maks jest zdefiniowana, więc jeśli tekst nie pasuje do tej maksymalnej szerokości, zwiększ wysokość podpowiedzi, aby dopasować tekst)

Co działa na prosty HTML rzeczy ...

#my_div 
{ 
    height:auto; 
    max-width:140px; 
    overflow:auto 
} 

nie działa highcharts podpowiedzi, zobacz http://jsfiddle.net/perikut/hNCDb/2/

Answer 1

domyślny white-space jest ustawiony nowrap, należy zmienić go na normal.

.highcharts-tooltip span { 
    height:auto; 
    width:140px; 
    background-color:green; 
    overflow:auto; 
    white-space:normal !important; // add this line... 
} 

DEMO

Answer 2

Jeśli chcesz tylko zmienić zachowanie white-space ofthe podpowiedzi na jednym wykresie i/lub oddzielnie kontrolować styl dla każdego wykresu, można użyć następujące podejście:

tooltip: { 
    useHTML: true, 
    formatter: function() { 
     return "<div style='width: 400px; white-space:normal;'>" + this.points[0].point.yourDataPointValue + "</div>"; 
    } 
} 

Demo

pamiętać, że można/należy użyć użyć nazwy klasy w porównaniu z INL ine style, jeśli chcesz użyć tego samego stylu dla wielu podpowiedzi.

Answer 3

Wystarczy dodać do opcji wykresu:

tooltip:{ 
    shared: false, 
    useHTML: true 
} 

następnie dodaj następującą do CSS:

.highcharts-tooltip span { 
    height:auto !important; 
    width:140px !important; 
    max-width:140px !important; 
    overflow:auto !important; 
    white-space:normal !important; 
} 

Jesteś dobry, aby przejść! ;-)