l'adaptation du texte à highchart info-bulle largeur max

Je veux adapter verticalement le texte dans mon highcharts info-bulle (un max-width est définie, donc si le texte ne correspond pas à cette largeur, d'augmenter l'info-bulle de la hauteur pour s'adapter le texte)

Ce qui fonctionne pour de simples HTML choses...

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

ne fonctionne pas pour highcharts les info-bulles, voir http://jsfiddle.net/perikut/hNCDb/2/

InformationsquelleAutor user1249791 | 2013-02-09
  1. 17

    par défaut white-space est définie nowrap, vous devez la modifier pour normal.

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

    DÉMO

    • Merci, cette solution est de travailler pour moi. J'ai eu à faire un petit changement pour que je puisse utiliser un nowrap span à l'intérieur de la bulle d'aide: .highcharts-tooltip > span {
    InformationsquelleAutor AliRıza Adıyahşi
  2. 4

    Si vous souhaitez uniquement modifier le white-space comportement de la bulle d'aide pour un tableau unique et/ou séparément contrôle le style pour chaque graphique, vous pouvez utiliser l'approche suivante:

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

    Démo

    Notez que vous pouvez/devez utiliser un nom de classe par rapport à un style en ligne si vous souhaitez réutiliser le même style pour plusieurs des info-bulles.

    InformationsquelleAutor Tim Medora
  3. 2

    Simplement ajoutez à cela les options du graphique:

    tooltip:{
    shared: false,
    useHTML: true
}

    Puis ajoutez les lignes suivantes à votre fichier CSS:

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

    Vous êtes bon pour aller! 😉

    InformationsquelleAutor Arcel Maendeleo