word break legend - eCharts

Question

I want to break the legend text line of a pie chart.

I tried following the documentation of the echarts website but I did not succeed.

    legend: {
      orient: 'vertical',
      left: '50%',
      top: 'center',
      data: mydata['data']['categoriestype'],
      textStyle: {
        color: '#CAD3DF',
        fontSize: '14',
        fontFamily: 'Roboto',
        rich: {
          mychart: {
            width: '10'
          }
      },
    },
  },

Answer 1

Same question with ECharts. How to apply width on title?

Seems echarts cannot support line break right now.

There is an issue in github

Currently, auto line wrap is not supported. So text with only make sense on text background. We should take into account the implementation of auto line wrap, although it is not easy.

Answer 2

5 years later, I face the same situation. The legend.textStyle.overflow with value "break" or "breakAll" break the line at any cacharacter (event if "break" is supposed to break words only) making the reading difficult:

So I manage to break line in my legend item simply by adding\n in the formatter return according to : How to get newline after the title in echarts line chart?).

Then I've set the textStyle.width to 150 and the itemWidth to 20 in order to have the 170px set in the grid "right" attribute. I post my workaround there, maybe it will help somebody :

grid: {
  right: '170px',
},
legend: {
  type: 'plain',
  orient: 'vertical',
  itemWidth: 20,
  textStyle: {
    width: 150,
    rich: {
      fw600: {
        fontWeight: 600,
      },
    },
  },
  formatter: function (name) {
    const value = 1000;
    return `${name}:\n{fw600|${value}}`;
  }
},

Here is the result :