Search code examples
extjssencha-touchsencha-architectextjs5

Ext JS Chart legend item alignment

I have an issue with chart legend item alignment. I need to place it horizontally. But by it showing vertically. Is there any way to change it in horizontally. enter image description here

This problem happen in EXT JS 5. Up to 4 it showing vertically by default.

Thanks in advance.

Solution

  • Add one custome tpl and specify float 

       <div class="x-legend-container">
<tpl for=".">
<div class="x-legend-item" style="float:left;margin:5px;padding:0px;cursor:pointer;">
<span class="x-legend-item-marker {[ values.disabled ? Ext.baseCSSPrefix + 'legend-inactive' : '' ]}" 
style="background:{mark};">
</span>{name}
</div>
</tpl>
</div>