Extjs Chart Legend items with scroll bar when legend items overflows - extjs

Question

I have an Ext JS pie chart with too many items. Because of this legend overflows and few items are not visible. I took a look at Smart legends (https://market.sencha.com/extensions/ext-ux-chart-smartlegend). But that seems ugly when the legend items are too many, and that makes the Chart looks tiny. So I'm looking for a solution where it would add a vertical scrollbar (when legend is in left or right hand side of the graph).
I was trying to see if I could add the scrollable container to the graph on which I could add the legends and when it overflows, scrollable container would add the scrollbar. So I was trying to override the "Ext.chart.Legend", and override the 'createBox' function. But I'm not sure how to add the component to the Chart since createBox() adds the Sprite to the chart's surface. Not sure how to add the 'scrollable container' to the chart on which I could add the legend.
Basically I'm looking for the graph which looks like in the attached image. Please help me on this.!! I need it ASAP. Thanks in advance!
https://www.dropbox.com/s/4q9o6v5ei4ba96r/Chart%20Legend%20items%20with%20scroll%20bar.png
Thanks!
Omega

Answer 1

JavaScript:
Ext.override(Ext.chart.Legend, {
createItems: function() {
if (this.customLegend != null) {
this.customLegend.remove();
}
this.customLegend = $('<div class="custom-legend"></div>');
$(this.chart.el.dom).append(this.customLegend);
this.callParent();
},
createLegendItem: function(series, yFieldIndex) {
var colorItem = series.getLegendColor(yFieldIndex).match(/.+?\-(.+?)\-.+?/i)[1];
var legendItem = $('<div class="custom-legendItem"><div class="custom-legendItemMarker" style="background-color: #'+colorItem+'"></div>'+series.yField[yFieldIndex]+'</div>');
$(this.customLegend).append(legendItem);
legendItem.on('mouseover', function() {
series._index = yFieldIndex;
series.highlightItem();
});
legendItem.on('mouseout', function() {
series._index = yFieldIndex;
series.unHighlightItem();
});
legendItem.on('mousedown', function() {
var me = this,
index = yFieldIndex;
if (!me.hiddenSeries) {
series.hideAll(index);
legendItem.addClass('hide');
} else {
series.showAll(index);
legendItem.removeClass('hide');
}
me.hiddenSeries = !me.hiddenSeries;
me.legend.chart.redraw();
});
},
updateItemDimensions: function() {
return {
totalWidth: 0,
totalHeight: 0,
maxWidth: 0,
maxHeight: 0
};
},
updatePosition: function() {
},
removeItems: function() {
}
});
CSS:
.custom-legend {
position: absolute;
right: 20px;
top: 0;
height: 100%;
overflow-y: auto;
border: 1px solid #CCC;
padding: 20px;
min-width: 200px;
}
.custom-legendItem {
margin: 4px 0;
}
.custom-legendItem.hide {
opacity: 0.5;
}
.custom-legendItem:hover {
cursor: pointer;
font-weight: bold;
}
.custom-legendItemMarker { display: inline-block; width: 12px; height: 12px; margin-right: 12px; }