View Full Version : Chart legend

24 Jul 2012, 11:59 PM
I've got long titles in the chart legend. Therefore I want each legend item to be in another line. I use bottom legend position. How to do it? I didn't find config which allows to determine position legend item.

25 Jul 2012, 5:19 AM
Have a look at:

legend: {
position: 'bottom'


25 Jul 2012, 6:21 AM
Legend will be at the bottom but legend items will be at one line. I want legend items to be like in left or right legend.

25 Jul 2012, 7:00 AM
You can create an override:
Take a look at createItems() in Ext.chart.Legend.


Gautham Suriya
15 Oct 2012, 4:03 AM
Try overriding createItems() in chart.Legend, u can use "this.items[i].x" inside that function to set the x position of legend items, replace y ter to set the y position.

15 Oct 2012, 10:06 PM
I also wanted chart legend with position:'bottom' to be displayed as a list of items.
Added following code:

Ext.override(Ext.chart.Legend, {
createItems: function() {
if (this.position == 'bottomList') {
this.position = 'bottom';
this.isVertical = true;

And in the chart definition added:

legend: {
position: 'bottomList', //custom config to display the legend as list below the chart

This worked fine. Have a look:

Only issue that I'm facing is when there is longer list. Since height is defined at chart config level the legend is overlapping the chart. I would like to get a scroll bar instead. Any suggsetions?

Gautham Suriya
17 Oct 2012, 8:42 PM
Do u want the items to be present in a vertical arrangement always? M nt sure abt the scroll for a legend though it does sound good, U cld check for the box creation methods n probably change the box to some container with scroll. I would suggest u to try for a matrix look, somethin lik this