Sencha Charts Pie label rotation

Question

I'm using the Sencha Touch 2.1 with Charts 1.1 to display some data.

I have a pie chart depicted below:

Pie chart example

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

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 doesn't seem to do anything when uncommented.

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

I'm not sure you can... The Label does have a rotationRads config option, but that defaults to zero (it comes from the sprite.Text object) and is most likely changed internally by the pie chart when it rotates. That's why it's able to re-rotate the labels when the chart rotates. Good luck though. — Jordan Kasper
This is pretty simple to do for ExtJS pie charts with the display property shown here. I've used it. Sencha Touch pie series does not have a config like this, I didn't see it in the source code either. You would have to override the label generation function on the sencha touch pie series. Somewhere in here, I don't have time to work it out right now but normally I would leap for the bounty. It is definitely do-able though. — egerardus

Eli Eli · Accepted Answer · 2013-02-08T13:57:31

Ok, I'm not sure whether this is the best way or not but it works for me, so after spending some time digging into the sencha chart library, the solution is easier then what I expected.

Just comment this line in PieSlice.js located at touch/src/chart/series/sprite/PieSlice.js of your app project:

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

This line perform as the key role to rotate the label of your pie chart.

Sencha Charts Pie label rotation

1 Answers