ExtJS 4 Smart legend extension, how to restrict width of legend

[alabs]

I'm using Smart legend extension to break the legend into 2 columns if too many categories are in.

But some legend have really lengthy text which will cause the legend to take up too much space and cause the chart to render really small. Is there any way to fix this issue?

[scottmartin]

Perhaps you could truncate your string using:
http://docs.sencha.com/ext-js/4-1/#!...ethod-ellipsis

Scott.

[alabs]

Hi Scott,

Will you be able to advise how truncation method should be applied?

Here is a sample of my code:

merchant1 = new Ext.chart.Chart({
            width: 900,
            height: 400,
            animate: true,
            store: storeMerchants,
            renderTo: Ext.Element.get('pie_merchant1'),
            shadow: false,
            legend: false,
            insetPadding: 0,
            theme: 'PieGraphs',
            series: [{
                type: 'pie',
                field: 'amount',
                showInLegend: true,
                highlight: {
                  segment: {
                    margin: 20
                  }
                },
                label: {
                    field: 'merchantname',
                    display: 'none',
                    color:"#ccc",
                    orientation:"horizontal",
                    minMargin:100,
                    contrast: false,
                    font: 'Helvetica,Arial,Verdana,sans-serif'
                },
                animate: true,
                listeners: {
                            itemmouseup: function(item) {
                                    monthName=item.storeItem.data.merchantname;
                                    alert("You have clicked on: " + monthName);
                                    Ext.Element.get('reset-container').removeCls('visible-zero')
                            }
                    },
                
                tips: {
                     trackMouse: true,
                     width:140,
                     anchor:'bottom',
                     anchorToTarget:true,
                     mouseOffset :[-40,0],
                     renderer: function(storeItem, item) {                            
                     this.setTitle('<p style="min-width:200px;padding-left:5px;padding-top:5px">' + storeItem.get('merchantname') + '<br/> <b>Amount: </b><span>' + numberWithCommas(storeItem.get('amount')) + '.<sup>00 SGD</sup></span></p>');    
                    
                    }
                
                      }
            }]
        });
        
        Ext.each(merchant1.legend.items, function(item) {
            item.un("mousedown", item.events.mousedown.listeners[0].fn);
        });

        legend = merchant1.legend = Ext.create('Ext.ux.chart.SmartLegend', {
            position:       'left',
            chart:          merchant1,
            rebuild:        true,
            boxStrokeWidth: 0
        });
        
        merchant1.legend.redraw();
        merchant1.redraw();

[scottmartin]

You should be able to use the 'load' listener on the store and alter the data at that point.

Scott.

[Jeegnesh]

very good example but,
My code Like this

me.chart = new Ext.create('Ext.chart.Chart', {
width: me.width, height: me.height,
store: chartStore, animate: me.animate,
shadow: me.shadow,
legend: true,
backGround: me.backGround,
axes: me.axes, series: me.series
});

legend = me.chart.legend = new Ext.create('Ext.ux.chart.SmartLegend', {
position: 'bottom',
chart: me.chart,
rebuild: true,
boxStrokeWidth: 1
});


me.chart.legend.redraw();
me.chart.redraw();

then it give me error of

Microsoft JScript runtime error: Unable to get value of the property 'add': object is null or undefined

on this line

box = me.boxSprite = me.chart.surface.add(Ext.apply({ . .of ext-all-debug.js file