View Full Version : How to customize the legend in barchart in extjs4.1

13 Aug 2013, 5:22 AM
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

15 Aug 2013, 4:17 PM

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


The position part is easy:

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:


Particularly, this method:

* @private Create the box around the legend items
createBox: function() {
var me = this,
box, bbox;

if (me.boxSprite) {

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;

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));


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!