How to set border for a pie chart in Sencha

Question

Hi anybody knows how to set the border for a pie chart in sencha touch? I tried every configuration in the docs but had no luck.

Answer 1

Chart series are drawn using sprites. You can pass custom sprite attributes through the subStyle option of the serie. See the doc of sprite (and CSS canvas properties) for available property.

Note that the subStyle option expects an array of values that will be used in order for each records.

Given all that, we can add borders to the docs pie chart example this way:

var chart = new Ext.chart.PolarChart({
    animate: true,
    interactions: ['rotate'],
    colors: ['#115fa6', '#94ae0a', '#a61120', '#ff8809', '#ffd13e'],
    store: {
        fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
        data: [
            {name: 'metric one',   data1: 10, data2: 12, data3: 14, data4: 8,  data5: 13},
            {name: 'metric two',   data1: 7,  data2: 8,  data3: 16, data4: 10, data5: 3},
            {name: 'metric three', data1: 5,  data2: 2,  data3: 14, data4: 12, data5: 7},
            {name: 'metric four',  data1: 2,  data2: 14, data3: 6,  data4: 1,  data5: 23},
            {name: 'metric five',  data1: 27, data2: 38, data3: 36, data4: 13, data5: 33}
        ]
    },
    series: [{
        type: 'pie',
        label: {
            field: 'name',
            display: 'rotate'
        },
        xField: 'data3',
        donut: 30,

        // --- Modification Here! ---

        subStyle: {
            strokeStyle: ['black', 'black', 'black', 'black', 'black'],
            lineWidth: [2,2,2,2,2]
        }

        // ---

    }]
});
Ext.Viewport.setLayout('fit');
Ext.Viewport.add(chart);

Adding border only to the external part of the chart would be much more complicated, I think.