Add a legend in the middle of a circular Gauge chart with Extjs

Question

I've drawn a circular gauge using extjs chart series. I would like to indicate the value of the gauge into the middle of it but I don't succeed. Does anyone could help me?

Here is the code I tried:

{
    xtype: 'polar',
    width: 60,
    height: 60,
    background: '#00c6c9',
    style: {left:0, right:0},
    series: {
            type: 'gauge',
            minimum: 0,
            maximum: 30,
            value: 10,
            colors: ['#25a2b6', 'lightgrey'],
            donut: 75,
            background: '#00c6c9',
            totalAngle: Math.PI * 2,
            style: {left:0, right:0},
            needleLength: 100
            /*,
            renderer: function(sprite, record, attributes, index, store) {
                var sprite2 = Ext.create('Ext.draw.Sprite', {
                type: 'text',
                text: Math.floor(attributes.value),
                font: '16px Arial',
                x: 30,
                y: 30
                });
                sprite2.show(true);    
                return attributes;
            },
            label: {
                field: 'value',
                display: 'middle'
            }*/
    }
}

I just want to show the value '10' of the series. In comments you can see I tried to add a renderer function and a label property. In this label, I guess I cannot write "field:'value'" but since I don't need to define a field I don't konw what to use.

Many thanks

Can you create a fiddle for this. You can enhance here. fiddle.sencha.com/#fiddle/1hp6 — UDID

Mr.Bruno Mr.Bruno · Accepted Answer · 2016-10-11T09:36:11

Here is the solution, you can change your sprite on render function of chart, and then redraw it, changing x,y,value and other things

Ext.create({
    xtype: 'polar',
    renderTo: document.body,
    width: 160,
    height: 160,
    background: '#00c6c9',
    style: {
        left: 0,
        right: 0
    },
    listeners:{
        render: function(chart){
            var sprite=Ext.clone(chart.getSprites()[0]);
            //modify sprite here
            sprite.text=''+chart.getSeries()[0].config.value;
            chart.setSprites(sprite);
            chart.redraw();
        }
    },
    sprites: [{
        type: 'text',
        x: 58,
        y: 95,
        text: 'test',
        fontSize: 40,
        fillStyle: 'white'
    }],
    series: {
        type: 'gauge',
        minimum: 0,
        maximum: 30,
        value: 10,
        colors: ['#25a2b6', 'lightgrey'],
        donut: 75,
        background: '#00c6c9',
        totalAngle: Math.PI * 2,
        style: {
            left: 0,
            right: 0
        },
        needleLength: 100
    }

    });

Add a legend in the middle of a circular Gauge chart with Extjs

1 Answers