You found a bug! We've classified it as EXTJS-5111 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Dec 2008
    Location
    Quebec, qc
    Posts
    73
    Vote Rating
    0
    stetou is on a distinguished road

      0  

    Default chart legend items truncated

    chart legend items truncated


    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
    Attached Images

  2. #2
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    71
    Vote Rating
    2
    softwarezman is on a distinguished road

      0  

    Default


    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!

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Vote Rating
    751
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #4
    Sencha User
    Join Date
    Aug 2010
    Posts
    7
    Vote Rating
    0
    jmitchell.br is on a distinguished road

      0  

    Default Yep

    Yep


    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

  5. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    3
    Vote Rating
    0
    komodon is on a distinguished road

      0  

    Default


    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.

    Code:
    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;
                }
                
            });

  6. #6
    Sencha User
    Join Date
    Mar 2013
    Posts
    31
    Vote Rating
    -1
    offshoreteam is an unknown quantity at this point

      0  

    Default


    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 :

    Code:
    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'
                      },
    ...

  7. #7
    Sencha Premium Member
    Join Date
    May 2013
    Location
    Rome Italy
    Posts
    17
    Vote Rating
    1
    r.colagrande is on a distinguished road

      0  

    Default position = float?

    position = float?


    If I set " position: 'float' " at runtime an exception occurs:
    "
    Uncaught Error: [ERROR][Ext.chart.Legend#applyDocked] Invalid docking position of 'undefined', must be either 'top', 'right', 'bottom', 'left' or `null` (for no docking) "

    it accepts only these values 'top', 'right', 'bottom', 'left' or `null`...

    I need to show my legend on the left only in landscape mode.

    any suggest?

    Thanks in advance
    Ray

    SDK: Touch 2.2.1


film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar