Plotly области диаграммы отсекает текст

Question

У меня есть следующий plotly код:

  var element = document.getElementById(scope.changeid); 

     function getData(division,redraw) { 
      var employeeData = []; 
      if (!division) { 
       $http.get(api.getUrl('competenceUserAverageByMyDivisions', null)).success(function (response) { 
        processData(response,redraw); 
       }); 
      } 
      else { 
       $http.get(api.getUrl('competenceUserAverageByDivision', division)).success(function (response) { 
        processData(response,redraw); 
       }) 
      } 

     } 

     function processData(data,redraw) { 
      var y = [], 
       x1 = [], 
       x2 = []; 

      data.forEach(function (item) { 
       y.push(item.user.profile.firstname); 
       x1.push(item.current_level); 
       x2.push(item.expected); 
      }); 

      var charData = [{ 
        x: y, 
        y: x1, 
        type: 'bar', 

        name: $filter('translate')('COMPETENCES.GRAPH.CURRENT'), 
        marker: { 
         color: '#23b7e5' 
        } 
       }, { 
        x:y, 
        y:x2, 
        type: 'bar', 
        marker: { 
         color: '#f05050' 
        }, 
        name: $filter('translate')('COMPETENCES.GRAPH.EXPECTED') 
       }], 
       layout = { 
        title: $filter('translate')('USERMANAGEMENT.USERS'), 
        barmode: 'stack', 
        legend: { 
         traceorder: 'reversed' 

        } 
       }; 

      Plotly.newPlot(element,charData,layout); 
     } 

     scope.$watch('divisionId', function (newValue, oldValue) { 
      if (newValue) { 
       getData(newValue.id,true); 
      } 
     }, true); 

     getData(null,false); 

Это порождает следующую таблицу:

      <div class="panel-body"> 
          <h4 class="text-center">{{'COMPETENCES.GRAPH_TITLES.OVERVIEW_GAP' | translate}}</h4> 
          <vertical-bar-chart id="chartArea" goto="competence.titleCompetenceDetails" 
               changeid="chartArea" xcolumn="xColumn" y-column="yColumn" 
               dataset="dataSet" 
               has-addition="true" 
               style="width: 80%; text-align: center"></vertical-bar-chart> 
         </div> 

Как вы могли бы сказать, текст (столбец x) непреднамеренно отключается. Итак, мой вопрос: как я могу избежать этого? я попытался увеличить высоту элемента, однако без каких-либо удачи :(

AS вы можете увидеть здесь:

(о, вы не можете сказать, потому что на белом фоне, но высота панели тело 1000 точек, однако она по-прежнему отрезает его.)

Answer 1

Попробуйте увеличить нижнюю границу в layout.margin.b (подробнее в plotlyjs reference page.

Answer 2

Для справки, у меня была такая же проблема, маргинальный в нижней части не помогло, но после того, как график был создан, я побежал следующий JQuery, который показал скрытый текст:

var heightincrease = $('#yourID').find('.svg-container').height() + 100; 
$('#yourID').find('.svg-container').height(heightincrease).find('.main-svg').height(heightincrease); 

Очевидно отрегулировать в соответствии с требованиями раскрыть весь свой график. Вероятно, это приведет к изменению размера, поэтому потребуется работа, если это вызывает беспокойство.