Как избежать пересечения легенды с метками?

Я использую echarts для некоторых небольших диаграмм в стиле панели мониторинга. Каковы мои варианты, чтобы избежать таких ситуаций?

Обратите внимание, как перекрываются метка среза для CityC и легенда для CityB.

Codepen

В идеале я хочу, чтобы диаграмма сжималась, чтобы вместить доступное пространство, не выходя за пределы легенды. Кажется, что "сетку" можно использовать для этого, но она не поддерживается для круговой диаграммы.

Следующим лучшим решением было бы отключить метки срезов, когда они перекрываются или адаптивно в определенной точке останова. Возможно?

Моя единственная оставшаяся идея — установить радиус в %, но в идеале мне нужны разные значения для разных размеров, и я не всегда могу предсказать размер контейнера, в котором окажется моя диаграмма.

Есть другие идеи?

option = {
  title: {
    text: 'Weather Statistics',
    subtext: 'Fake Data',
    left: 'center'
  }
}