Hello @Prasoon!
Sorry, I think I've tested this on a v3 chart or something like it, it seems that from v2 to v3 the legend turned from svg sprites buildup to actual HTML5 elements. So in v2 there's not much that can be done with css styling.
The bad news is that it is not so easy to restyle charts in Ext.NET v2. The good news is that I ended up finding how to do so:
Ext.define('Ext.chart.LegendItem', {
override: 'Ext.chart.LegendItem',
drawFilledBox: function (width, height, z, index) {
var me = this,
surface = me.surface,
series = me.series;
return me.add('box', surface.add({
type: 'rect',
zIndex: (z || 0) + 2,
x: 0,
y: 0,
width: width,
height: height,
fill: series.getLegendColor(index),
stroke: 'black',
strokeWidth: 1,
style: {
cursor: 'pointer'
}
}));
}
});
Notice the two
stroke
lines on the code above. This is the only change from the original code and should get you with the borders.