chart legend items truncated

[stetou]

When the series title are too large or if the user shrink the window the legend box is truncated, see image
Is there a way to wrap text inside the legend box ? If not, any idea where in extjs code I could add this behavior?
thanks in advance for your help,
Steve

[softwarezman]

I have ran into this issue as well. The only solution I could come up with was moving the legend from the bottom to the left/right. That at least reduced the space used and got it to fit on the screen fairly well. As far as what you are talking about, I'm pretty sure you can't do it... yet. I'd love to be wrong though!

[mitchellsimoens]

I know I have run into this and thought I have seen a bug already reported but couldn't so I'm gonna push this up.

[jmitchell.br]

I'm running in to this too. Until this is fixed, is there a reasonable way to override the legend item's text before it gets pushed into the legend? I'd be happy if I could use something like Ext.String.ellipsis() on it.

If we can't intercept the items' creation, it looks like I can get at the text later once it's already rendered using chart.legend.items[n].items[0], and the text is in there, and I can even change it...but no luck getting it to redraw using the changed text. If I redraw the whole chart, obviously, my changes are lost. Any help appreciated!

Edit: first post made no sense

[komodon]

I wrote the following piece of code for Extjs 4.1.0 Beta 2a and visually it seems ok. Though its not exact and doesnt center 100% if truncation occurs but close.
It adds one additional itemspacing before and last items and the code renders each legend item with the sizes of the widest and highest. I hardcoded two offsetconstants, since i couldnt find a way the calculate the consumed space between chart and legend.
Setting padding to 0 should result in a similar spacing without using this override.

Ext.override(Ext.chart.Legend, {        
            createItems: function() {
                var me = this,
                    chart = me.chart,
                    surface = chart.surface,
                    items = me.items,
                    padding = me.padding,
                    itemSpacing = me.itemSpacing,
                    spacingOffset = 2,
                    itemWidth = 0,
                    itemHeight = 0,
                    totalWidth = 0,
                    totalHeight = 0,
                    vertical = me.isVertical,
                    math = Math,
                    mfloor = math.floor,
                    mmax = math.max,
                    index = 0,
                    i = 0,
                    len = items ? items.length : 0,
                    x, y, item, bbox, height, width,
                    // chart dimensions
                    chartBBox = chart.chartBBox,
                    chartInsets = chart.insetPadding,
                    chartWidth = chartBBox.width - (chartInsets * 2),
                    chartHeight = chartBBox.height - (chartInsets * 2),
                    xOffset = 0, yOffset = 0,                    
                    legendWidth = 0, legendHeight = 0,
                    legendXOffset = 50, legendYOffset = 50,
                    hSpacing, vSpacing;

                //remove all legend items
                if (len) {
                    for (; i < len; i++) {
                        items[i].destroy();
                    }
                }
                //empty array
                items.length = [];
                                
                // Create all the item labels, collecting their dimensions and positioning each one
                // properly in relation to the previous item
                chart.series.each(function(series, i) {
                    if (series.showInLegend) {
                        Ext.each([].concat(series.yField), function(field, j) {
                            item = new Ext.chart.LegendItem({
                                legend: this,
                                series: series,
                                surface: chart.surface,
                                yFieldIndex: j
                            });
                            bbox = item.getBBox();
        
                            width = bbox.width;
                            height = bbox.height;
                                   
                            itemWidth = mmax(itemWidth, width);
                            itemHeight = mmax(itemHeight, height);
        
                            items.push(item);
                        }, this);                        

                    }
                }, me);
                
                //spacing = itemSpacing / (vertical ? 2 : 1);
                vSpacing = itemSpacing / 2;
                hSpacing = itemSpacing;
                if (vertical) {
                    if ( chartHeight - legendYOffset < items.length * (itemHeight + vSpacing) + 2 * padding + vSpacing) {
                        legendHeight = chartHeight - legendYOffset;
                        yOffset = mfloor((legendHeight - mfloor((legendHeight - 2 * padding - vSpacing) / (itemHeight + vSpacing)) * (itemHeight + vSpacing) ) / 2);
                    }
                    else {
                        legendHeight = items.length * (itemHeight + vSpacing) + 2 * padding + vSpacing;
                        yOffset = vSpacing + padding;
                    }
                    xOffset = hSpacing + padding;
                    totalWidth = xOffset;
                    totalHeight = yOffset;
                }
                else {
                    if ( chartWidth - legendXOffset < items.length * (itemWidth + hSpacing) + 2 * padding + hSpacing) {
                        legendWidth = chartWidth - legendXOffset;
                        xOffset = mfloor((legendWidth - mfloor((legendWidth - 2 * padding - hSpacing) / (itemWidth + hSpacing)) * (itemWidth + hSpacing) ) / 2);
                      }
                    else {
                        legendWidth = items.length * (itemWidth + hSpacing) + 2 * padding + hSpacing;
                        xOffset = padding + hSpacing;
                    }
                    yOffset = padding + vSpacing;
                    totalHeight = yOffset;
                    totalWidth = xOffset;
                }
                
                Ext.each(items, function(item, j) {                 
                    if (vertical && (totalHeight + vSpacing + itemHeight > chartHeight - legendYOffset)) {
                        totalHeight = yOffset;
                        totalWidth += itemWidth + hSpacing;
                    }
                    else if (!vertical && (totalWidth + hSpacing + itemWidth > chartWidth - legendXOffset)) {
                        totalWidth = xOffset;
                        totalHeight += itemHeight + vSpacing;
                    }
                    item.x = totalWidth;
                    item.y = mfloor(totalHeight + itemHeight / 2);

                    // Collect cumulative dimensions
                    if (vertical)
                        totalHeight += itemHeight + vSpacing;
                    else
                        totalWidth += itemWidth + hSpacing;
                                                
                }, me);
        
                // Store the collected dimensions for later
                me.width = mfloor(vertical ? totalWidth + itemWidth + xOffset : legendWidth);
                me.height = mfloor(vertical ? legendHeight : totalHeight + itemHeight + yOffset );
                me.itemHeight = itemHeight;
                me.itemWidth = itemWidth;
            }
            
        });

[offshoreteam]

Hi stetou,

You can arrange legends vertically by setting legend position to float and set x and y position accordingly also you need to set insetPadding (default is 10)

Code snippet :

Ext.create('Ext.chart.Chart', {
                renderTo: params.renderTo,
                width: 280,
                height: 240,
                theme: 'forecastedBarTheme',
                animate: true,
                insetPadding:50,
                autoSize: true,
                id: 'chart' + params.chartType,
                cls: 'texta',
                store: chartStore,
                legend: {
                    position: 'float',
                    x: 0,
                    y:-40,
                    boxFill: 'none',
                    boxStroke: 'none',
                    labelFont: '9px Helvetica, sans-serif'
                  },
...