Sencha Charts

Question

I am using Sencha Touch 2.1 with charts 1.1 to display some data.

I have a pie chart below:

I want the labels to stay where they are, but I want them to be horizontal (not rotate).

extend: 'Ext.chart.PolarChart', requires: [ 'Ext.chart.axis.Numeric', 'Ext.chart.axis.Category', 'Ext.chart.series.Pie', 'Charting.store.charts.perStore', 'Ext.chart.interactions.Rotate' ], config: { colors: ["#6295C7", "#CCCCC", "#FFFFF"], store: 'chrtProduct', // centered:true, // innerPadding:20, series: [{ type: 'pie', labelField: 'verdeling', label:{ /*display:'middle', orientation:'horizontal',*/ field:'patVerdeling', font: '1em Trade Gothic LT Std Bold', contrast:true, disableCallout:true }, xField: 'patVerdeling' //,rotation:90 }] //,interactions: ['rotate'] 

The following code does not seem to do anything if it is not signed.

 display:'middle', orientation:'horizontal', 

Answer 1

Well, I'm not sure if this is the best way or not, but it works for me, so after spending some time looking in the sencha diagram library, the solution is simpler than I expected.

Just comment on this line in PieSlice.js located in touch/src/chart/series/sprite/PieSlice.js your application project:

 labelCfg.rotationRads = midAngle + Math.atan2(surfaceMatrix.y(1, 0) - surfaceMatrix.y(0, 0), surfaceMatrix.x(1, 0) - surfaceMatrix.x(0, 0)); 

This line serves as a key role for rotating the label of your pie chart.