Как увеличить имя в круговой диаграмме в extjs

Question

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

{ 
 
    xtype: 'polar', 
 
    split: true, 
 
    flex: 0.3, 
 
    colors: [ 
 
    '#347327', 
 
    '#2897d2', 
 
    '#de6110', 
 

 
    ], 
 
    bind: { 
 
    store: '{pie}' 
 
    }, 
 
    series: [{ 
 
    type: 'pie', 
 
    showInLegend: true, 
 
    donut: false, 
 
    tips: { 
 
     trackMouse: true, 
 
     width: 140, 
 
     height: 28, 
 
     renderer: function(storeItem, item) { 
 
     this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data')); 
 
     } 
 
    }, 
 
    highlight: { 
 
     segment: { 
 
     margin: 15 
 
     } 
 
    }, 
 
    label: { 
 
     field: 'name', 
 
     display: 'rotate', 
 
     contrast: true, 
 
     font: '12px Arial' 
 
    }, 
 
    xField: 'data' 
 
    }], 
 
    interactions: [{ 
 
    type: 'rotate' 
 
    }] 
 
}

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

var pieStore = this.getViewModel().getStore('pie'); 
 
var rec = selected[0]; 
 

 

 
if (rec.get('new')) { 
 
    pieStore.add({ 
 
    'name': 'NEW', 
 
    data: rec.get('new'), 
 
    total: rec.get('total') 
 
    }); 
 
} 
 
if (rec.get('openToQc')) { 
 
    pieStore.add({ 
 
    'name': 'QC', 
 
    data: rec.get('openToQc'), 
 
    total: rec.get('total') 
 
    }); 
 
} 
 
if (rec.get('open')) { 
 
    pieStore.add({ 
 
    'name': 'Open', 
 
    data: rec.get('open'), 
 
    total: rec.get('total') 
 
    }); 
 
} 
 
if (rec.get('rejected')) { 
 
    pieStore.add({ 
 
    'name': 'Rejected', 
 
    data: rec.get('rejected'), 
 
    total: rec.get('total') 
 
    }); 
 
}

Answer 1

Проблема заключается на этикетке серии:

label: { 
     field: 'name', 
     display: 'rotate', 
     contrast: true, 
     font: '12px Arial' 
    }, 

display: 'rotate', отображает метку внутри диаграммы в некоторых случаях и за ее пределами в других, вместо этого вы должны использовать display: 'inside',

You can see a working example here