L'étiquette du graphique à barres des graphiques hauts chevauche le graphique lorsque les étiquettes sont longues

Question

J'ai besoin de l'étiquette xAxis pour avoir une pointe d'outil. Mais lorsque j'utilise un formateur pour ajouter la pointe d'outil, les longues étiquettes ont tendance à se chevaucher avec le graphique au lieu de le pousser vers la droite. En outre, cela se produit uniquement si l'étiquette comporte un espace blanc, si les espaces blancs sont supprimés, cela fonctionne correctement et pousse le graphique vers la droite. Ce problème est illustré dans ce violon: http://jsfiddle.net/W5wag/44

$(function(){ 
    var chart1; 
    $(document).ready(function(){ 
    var options = { 
     chart: { 
      renderTo: 'container', 
      type: 'bar' 
     }, 
     xAxis: { 
      categories: ['cat1aaaaaaaaaaaaaaaasadadadad adadaaaaaaaaaaaaaaaaaaaaa', 'cat2', 'cat3', 'cat4', 'cat5'], 
      labels: { 
       formatter: function() { 
        return '<span title="abc">' + this.value + '</span>'; 
       }, 
       useHTML: true, 
       style: { 
        whiteSpace: 'nowrap' 
      } 
     }, 
     }, 

    }; 

    options.series = [{ 
      data: [3, 4, 4, 3, 9] 
     }]; 
    chart1 = new Highcharts.Chart(options); 
    }); 
}) 

Answer 1

J'ai essayé d'exécuter du code après que les étiquettes ont été rendus, mais mon expérience est un peu limité là. Je vais essayer de trouver la largeur maximale de l'un des libellés de l'axe des x, définir cela comme la largeur minimale du parent (comme ci-dessous), et invalider les étiquettes pour déclencher un redessin. Peut-être que vous pouvez trouver un moyen de le faire.

Si tout le reste échoue, vous pouvez « tricher » avec ces solutions rapides n-sale:

définir le texte sans espaces, et les ajouter ensuite, quand la mise en page est faite.

window.setTimeout(()=>document.querySelector('span[title=abc]') 
        .innerHTML='cat1aaaaaaaaaaaaaaaasadadad adadadaaaaaaaaaaaaaaaaaaaaa', 500); 

Ou, ajouter css à la page (qui nécessite de connaître la largeur des étiquettes seront, bien):

.highcharts-axis-labels.highcharts-xaxis-labels > * { min-width: XXXpx }