This is how it looks now: piechart_bad.png This is how roughly I want it to look: piechart_good.png . I got it to look good by inserting a bunch of <br> tags inside label, but it is not a good solution - labels are user generated and it would be really not user friendly to ask them to insert those tags, or it would be rather challenging to make those tags auto inserted at different amount of words, given the variable size of these charts. Besides it smells like bandage approach more than anything. What I am really looking for, is making word wrap to work from CSS. I tried putting

.donut-widget-legend .x-legend-item {
    word-wrap: break-word !important; 
however it doesn't do anything, because upon inspecting the legend, the label string is already truncated, and what is most annoying, is that I can't find exactly where it happens in ExtJS source code.