Графически легенды накладываются друг на друга в верхней части графика

Question

С помощью plotly я создаю свою аналитическую панель, в которой есть круговая диаграмма, гистограмма и различные диаграммы.У меня есть круговая диаграмма, которая содержит огромные данные и легенды почти 60. Она правильно отображается в браузере (большой экран), проблема с мобильными экранами.Легенды графиков перекрывают реальный график. Я ожидаю, что график будет отображаться на экранах мобильных устройств, как показано ниже.Может ли кто-нибудь помочь мне в этом.

Мой Json выглядит следующим образом.

{
  "data": [{
    "values": [1058,177,75,53,28,23,15,8,7,6,5,5,2,2,1,1,1,1,1,1,0],
    "labels": ["Vision Corporation","Corporate Human Resources","Human Resources-West","Human Resources-East","Human Resources-Central","Recruiting-East","Human Resources","Recruiting-South","Payroll","Recruiting-West","Human Resources-South","Recruiting-Central","200-Human Resources","Direction des Ressources Humaines","Accounts Payable","Commercial Sales","Commercial Sales-West","Services-East","Vision Australia","Vision Industries","Others"],
    "type": "pie",
    "textposition":"inside"
  }],
  "linked": {
    "layout": {
      "legend":{
        "orientation": "h",
        "x": 1.02,
        "xanchor": "center",
        "y": 1.0,
        "yanchor": "bottom"
      },
      "margin":{
        "l": 0
      }
    }
  }
}

Answer 1

Отказ от ответственности: не пробовал это на мобильном телефоне.Тем не менее, у меня была похожая проблема с браузером (огромная легенда) - и это помогло решить проблему:

Вы можете контролировать размер диаграммы.Увеличив свойство высоты, вы оставите больше места для вашей легенды.

Добавьте свойство 'height' под объектом 'layout' и поиграйтесь с размером, подходящим для ваших данных -

"layout": {
  "height": 1000, ...

Вы также можете добавить свойство width, если это необходимо.См. Пример здесь (не в JSON, но свойства понятны).