CODEWITHSUNDEEP
legendline-breaksechartsword-break
Medina
Medina

Reputation: 67

word break legend - eCharts

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'
          }
      },
    },
  },

Upvotes: 0

Views: 4107

Answers (2)

Foxlab
Foxlab

Reputation: 932

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: not good

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 :

good

Upvotes: 1

Clocher Zhong
Clocher Zhong

Reputation: 2456

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.

Upvotes: 0

Related Questions