CODEWITHSUNDEEP
javascripttreemap
Calla
Calla

Reputation: 151

Label can't display when ECharts label's length is too long

I just use the treemap type of EChart to show the data. But I meet a problem. And the label option shows as the following: itemStyle:{ normal:{ label:{ show :true, formtter:"{b}"}

If my data name's length is too long(maybe more than 60 characters), the label doesn't show on the Treemap. The Name will show on the tooltip. Why? How can I solve this problem? Thanks !

Upvotes: 10

Views: 22530

Answers (6)

gagarine
gagarine

Reputation: 4338

You can find a good example on the official doc https://echarts.apache.org/examples/en/editor.html?c=treemap-disk

enter image description here

Upvotes: 0

HellJosun
HellJosun

Reputation: 137

I looked at the official documentation. It said 'yAxis.nameTextStyle.overflow'. https://echarts.apache.org/en/option.html#yAxis.nameTextStyle.overflow

It turned out that the nameTextStyle part had to contain a name such as 'axisLabel'.

        tooltip: {
            trigger: "axis",
        },

        yAxis: {
            type: "category",
            inverse: true,

            data: ["very long title very long title very long title very long title very long title very long title", "very long title very long title very long title very long title very long title very long title", "very long title very long title very long title very long title very long title very long title"],

            axisLabel: {
                margin: 20,
                width: "90",
                overflow: "truncate",
            },
        },

result: enter image description here

Upvotes: -2

Mario Vázquez
Mario Vázquez

Reputation: 777

Set desired space in one or both sides of the grid:

grid: {left:"450px", right:"200px"}

Upvotes: 1

Jacob
Jacob

Reputation: 7821

Use the extraCssText property to set a width and force wrapping. This only works if your name has spaces in it.

tooltip: { extraCssText: "width:200px; white-space:pre-wrap;" }

Upvotes: 4

Tek Kshetri
Tek Kshetri

Reputation: 2337

Try to set the grid as below,

grid: { containLabel: true },

This will adjust your chart label.

Upvotes: 17

Nickname
Nickname

Reputation: 109

Try to use \n within the text labels.

Example:

   series : [
    {
        name: 'pie-chart',
        type: 'pie',
        selectedMode: 'single',
        radius: ['50%', '60%'],
        data:[
            {value:5, name:'Institutionelle Investoren\nRest der Welt: 5 %'},
            {value:39, name:'Institutionelle Investoren\nEuropa\n(ohne\nDeutsch-\nland): 39 %'},
            {value:31, name:'Institutionelle\nInvestoren\nUSA: 31 %'},
            {value:17, name:'Institutionelle\nInvestoren\nDeutsch-\nland: 17 %'},
            {value:8, name:'Privatanleger & nicht näher\nbekannte Investoren: 8 %'}             

        ],
...

Upvotes: 0

Related Questions