Search code examples
javascriptchartspie-chartextjs6

how to increase name in pie chart in extjs


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')
  });
}

its clear that i have six letters in third part of the chart but when i give it five or less then five letters it will show it on the chart i just want to have a large name but on the chart


Solution

  • 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