Results 1 to 3 of 3

Thread: How is the chart legend width controlled?

  1. #1
    Sencha User 12ftguru's Avatar
    Join Date
    May 2007
    Posts
    22
    Vote Rating
    1
      0  

    Default How is the chart legend width controlled?

    I am working with a Pie chart in a 400px wide container. The chart itself, scales correctly to fit in the container but since there are a number of data points, the legend runs off either side of the box.

    Just as an example, here is some code straight out of the designer:

    Code:
    Ext.define('MyApp.view.ui.MyContainer', {
        extend: 'Ext.container.Container',
    
        height: 250,
        width: 400,
    
        initComponent: function() {
            var me = this;
            me.items = [
                {
                    xtype: 'chart',
                    height: 250,
                    width: 400,
                    animate: true,
                    insetPadding: 20,
                    series: [
                        {
                            type: 'pie',
                            label: {
                                field: 'x',
                                display: 'rotate',
                                contrast: true,
                                font: '12px Arial'
                            },
                            showInLegend: true,
                            angleField: 'y'
                        }
                    ],
                    legend: {
    
                    }
                }
            ];
            me.callParent(arguments);
        }
    });
    This will give you a chart with the legend clipped off on either end (see image).

    Reducing the size of the chart has no effect on the legend.
    Reducing the parent container doesn't effect the chart or the legend.
    The legend itself has no width properties.

    I can go vertical with it and play with the x, y settings, but it it gets too long the container's autoScroll value never kicks in.

    Is there any way to modify the layout and/or size of the legend?
    Attached Images Attached Images

  2. #2
    Sencha Premium User
    Join Date
    Jun 2008
    Posts
    13
    Vote Rating
    0
      0  

    Default

    Had a similar problem and found that this provides more control over the legend's width/height:

    Code:
    Ext.chart.Legend.override({
        
        minWidth:0,
        
        minHeight:0,
    
        getBBox:function () {
            var me = this;
    
            if (me.width < me.minWidth)
                me.width = me.minWidth;
    
    
            if (me.height < me.minHeight)
                me.height = me.minHeight;
    
    
            return {
                x:Math.round(me.x) - me.boxStrokeWidth / 2,
                y:Math.round(me.y) - me.boxStrokeWidth / 2,
                width:me.width,
                height:me.height
            };
        }
    });
    And update the config with:

    Code:
    legend:{
        position:'right',
        minWidth:130
    }
    Hope this helps.

    Nick

  3. #3
    Sencha User
    Join Date
    Sep 2016
    Posts
    1
    Vote Rating
    1
      1  

    Default

    Thanks Nick. I tried your solution. It works well for me.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •