ExtJS Save Chart

Save Chart/convert to image

tbar: [

    {

        text: 'Save Chart',

        handler: function () {

            Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?',

                function (choice) {

                    if (choice == 'yes') {

                        chart.save({

                            type: 'image/png'

                        });

                    }

                });

        }

    },

ExtJS Custom Chart, Series Tips Custom

Tempelkan code ini disetiap series type ex: bar,column dll

{   highlight: true,
    type: 'bar',
    axis: 'bottom',
    xField: 'name',
    yField: ['data1', 'data2']
    ,tips: {
        trackMouse: true,
        width: 200,
        renderer: function (storeItem, item) {
            this.setTitle(
                item.value[0] + '<br>' +
                    Ext.util.Format.number(item.value[1], '0,0')
            );
        }
    }

hasilnya seperti ini:

ExtJS Custom Chart, Axes Numeric

{
    type: 'Numeric',
    label:
            {
                renderer: function (v) {
                    return String(v).replace(/(.)00000$/, '.$1M');
                }
            },
    grid: true,
    position:'bottom'
}

hasilnya seperti ini: 

ExtJS Custom Chart, Series Bar Width

Tambahkan custom script pada series bar:

//====================== custom width bar
,groupGutter: -100
, renderer:function (sprite, record, attr, index, store) {
    if (index % 2 > 0) {
        return Ext.apply(attr, {
            height: attr.height / 2,
            y: attr.y + ((attr.height / 2)/2)
        });
    } else {
        return Ext.apply(attr, {
        });
    }
}
//====================== custom width bar 

copy source ini ke dalam localhost pada folder "\examples\charts"

Hasilnya seperti ini: