Results 1 to 2 of 2

Thread: How to customize the legend in barchart in extjs4.1

  1. #1

    Default How to customize the legend in barchart in extjs4.1

    Hi
    Can anybody tell How to customize the legend in barchart in extjs4.1 .I have the requirement to show check box in legend and show the legend position bottom start from left side.legend is showing center in bottom
    Thanks

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Posts
    47
    Answers
    9

    Default

    Hello,

    Start out by familiarizing yourself with the Ext.chart.Legend documentation:

    http://docs.sencha.com/extjs/4.2.1/#...t.chart.Legend

    The position part is easy:

    Code:
    legend: {
        position: 'float',
        x: 10,
        y: 250
    }
    Here's a working example:



    Now the "checkbox" part is harder. Check out the source code for the legend:

    http://docs.sencha.com/extjs/4.2.1/s...t-chart-Legend

    Particularly, this method:

    Code:
    /**
     * @private Create the box around the legend items
     */
    createBox: function() {
        var me = this,
            box, bbox;
    
    
        if (me.boxSprite) {
            me.boxSprite.destroy();
        }
    
    
        bbox = me.getBBox();
        //if some of the dimensions are NaN this means that we
        //cannot set a specific width/height for the legend
        //container. One possibility for this is that there are
        //actually no items to show in the legend, and the legend
        //should be hidden.
        if (isNaN(bbox.width) || isNaN(bbox.height)) {
            me.boxSprite = false;
            return;
        }
        
        box = me.boxSprite = me.chart.surface.add(Ext.apply({
            type: 'rect',
            stroke: me.boxStroke,
            "stroke-width": me.boxStrokeWidth,
            fill: me.boxFill,
            zIndex: me.boxZIndex
        }, bbox));
    
    
        box.redraw();
    },
    Note that the "box" that acts as a checkbox is actually an SVG <rect>. You would need to implement a custom legend extension and override this method. I think your best bed would be to have a "blank" rectangle and use CSS to put an image of checkbox over it, but you could certainly get creative and draw the actual checkbox in SVG. The actual checked/unchecked functionality would be yet harder, as you would need to implement custom event handlers on the SVG <rect>.

    You can always engage Sencha Professional Services to have this custom functionality developed for you: http://www.sencha.com/support/services/

    I hope this helps!

Tags for this Thread

Posting Permissions

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