4

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',
Eli
  • 14,779
  • 5
  • 59
  • 77
SnK
  • 528
  • 1
  • 11
  • 32
  • I'm not sure you can... The [`Label`](http://docs.sencha.com/touch/2-1/#!/api/Ext.chart.label.Label) does have a `rotationRads` config option, but that defaults to zero (it comes from the [`sprite.Text`](http://docs.sencha.com/touch/2-1/#!/api/Ext.draw.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 Feb 06 '13 at 23:19
  • 1
    This is pretty simple to do for ExtJS pie charts with the display property shown [here](http://docs.sencha.com/ext-js/4-1/#!/api/Ext.chart.series.Pie-cfg-label). 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](http://docs.sencha.com/touch/2-1/source/Pie.html#Ext-chart-series-Pie), 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 Feb 07 '13 at 04:48

1 Answers1

2

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.

Eli
  • 14,779
  • 5
  • 59
  • 77
  • 1
    @SnK This would probably work best as an override in the app - instead of modifying the framework files. You would just have to write an override declaration in your app for the `placeLabel` function of [this](http://docs.sencha.com/touch/2-1/#!/api/Ext.chart.series.sprite.PieSlice) class with the suggestion written above. – egerardus Feb 08 '13 at 22:06