如何在extjs的饼图中增加名称

Question

when I use more then five letters in my name it comes out of the chart see the image i uploaded i am using extjs 6 I just want to have a large name on my chart

  { 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' }] } 

here is My dynamically given names i want that names in side of my pie chart i mean above on the chart But when i use name that contain more then 5 letters it goes out side of the chart i will upload a image.

 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

The problem is on your series label:

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

display: 'rotate', displays the label inside the chart in some cases and outside in others, you should use instead display: 'inside',

You can see a working example here