CODEWITHSUNDEEP
javascriptextjsextjs4.1
Surya Prakash Tumma
Surya Prakash Tumma

Reputation: 2203

How to display total in Donut hole in Ext js Pie Chart

How to display total in donut hole of my pie chart ?

Here is my example code 

Ext.onReady(function() {

    var store = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data'],
        data: [{
            'name': 'metric one',
            'data': 10
        }, {
            'name': 'metric two',
            'data': 7
        }, {
            'name': 'metric three',
            'data': 5
        }, {
            'name': 'metric four',
            'data': 2
        }, {
            'name': 'metric five',
            'data': 27
        }]
    });

    Ext.create('Ext.chart.Chart', {
        renderTo: Ext.getBody(),
        width: 500,
        height: 350,
        animate: true,
        store: store,
        theme: 'Base:gradients',
        series: [{
            type: 'pie',
            angleField: 'data',
            showInLegend: true,
            donut: 40,
            tips: {
                trackMouse: true,
                width: 140,
                height: 28,
                renderer: function(storeItem, item) {
                    // calculate and display percentage on hover
                    var total = 0;
                    store.each(function(rec) {
                        total += rec.get('data');
                    });
                    this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
                }
            }
        }]
    });
});

Here is my output

enter image description here

How to display the total in donut hole

Upvotes: 2

Views: 1886

Answers (1)

Guilherme Lopes
Guilherme Lopes

Reputation: 4760

Add a text sprite to your chart using the items config: 

Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 350,
    animate: true,
    store: store,
    theme: 'Base:gradients',
    series: [{
        type: 'pie',
        angleField: 'data',
        showInLegend: true,
        donut:40,
        tips: {
            trackMouse: true,
            width: 140,
            height: 28,
            renderer: function(storeItem, item) {
                // calculate and display percentage on hover
                var total = 0;
                store.each(function(rec) {
                    total += rec.get('data');
                });
                this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
            }
        }
    }],
    items : [{
        type: "text",
        text: store.sum('data'),
        fill: "green",
        font: "36px monospace",
        x: 227,
        y: 170
    }]
});

Upvotes: 3

Related Questions