antd charts: remove truncation of text in legend

Question

I'd like to achieve something fairly simple inside an antd chart.

Antd is truncation legend items and is adding "...". I want to remove that truncation and instead display the whole label.

I tried various approaches, e.g. itemValue: {formatter...} or customContent... but no success. Even setting the itemWidth did not remove the three dots.

Here is a fiddle: https://codesandbox.io/s/antd-charts-forked-isy7dv?file=/src/DemoChart.js

Answer 1

OK i figured it out, the key is setting maxItemWidth to a high number (by the way: the docs do not state the default value of maxItemWidth):

 const config = {
    data,
    xField: 'year',
    yField: 'value',
    seriesField: 'category',
    appendPadding: 10,
    legend: {   
        position: 'bottom',
        flipPage: false,
        maxHeightRatio: 1,
        maxItemWidth: 500
    }
};