PDA

View Full Version : How is the chart legend width controlled?



12ftguru
18 Aug 2011, 5:22 AM
I am working with a Pie chart in a 400px wide container. The chart itself, scales correctly to fit in the container but since there are a number of data points, the legend runs off either side of the box.

Just as an example, here is some code straight out of the designer:


Ext.define('MyApp.view.ui.MyContainer', {
extend: 'Ext.container.Container',

height: 250,
width: 400,

initComponent: function() {
var me = this;
me.items = [
{
xtype: 'chart',
height: 250,
width: 400,
animate: true,
insetPadding: 20,
series: [
{
type: 'pie',
label: {
field: 'x',
display: 'rotate',
contrast: true,
font: '12px Arial'
},
showInLegend: true,
angleField: 'y'
}
],
legend: {

}
}
];
me.callParent(arguments);
}
});

This will give you a chart with the legend clipped off on either end (see image).

Reducing the size of the chart has no effect on the legend.
Reducing the parent container doesn't effect the chart or the legend.
The legend itself has no width properties.

I can go vertical with it and play with the x, y settings, but it it gets too long the container's autoScroll value never kicks in.

Is there any way to modify the layout and/or size of the legend?

wildfire
21 Apr 2012, 11:01 AM
Had a similar problem and found that this provides more control over the legend's width/height:


Ext.chart.Legend.override({

minWidth:0,

minHeight:0,

getBBox:function () {
var me = this;

if (me.width < me.minWidth)
me.width = me.minWidth;


if (me.height < me.minHeight)
me.height = me.minHeight;


return {
x:Math.round(me.x) - me.boxStrokeWidth / 2,
y:Math.round(me.y) - me.boxStrokeWidth / 2,
width:me.width,
height:me.height
};
}
});

And update the config with:


legend:{
position:'right',
minWidth:130
}


Hope this helps.

Nick