Incubator-echarts: Pie (and other) charts with label going outside of canvas

[sbokorna]

问题简述 (One-line summary)

Pie charts with sections with long name have the labels that overlap / go out of the canvas (so no more visible)

版本及环境 (Version & Environment)

• ECharts 版本 3.2.3:
• Chrome 52.0.2743.116 (64-bit):
• MAC OS-X El Capitan 10.11.6 (OS Version):
  

  重现步骤 (Steps to reproduce)

1. Create a pie chart with several sections with long labels (PROBLEM)
2. Reduce the page size and reload (Same Problem and often overlap)
   

   期望结果 (Expected behaviour)

The labels should stay visible even when they are too long.

可能哪里有问题 (What went wrong)

The labels are not visible and often overlap

ECharts配置项 (ECharts option)

            scope.distributionEvent = {
                identity: $echarts.generateInstanceIdentity(),
                dimension: '10:4',
                config: {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b} : {c} ({d}%)",
                        zlevel: 2,
                        z: 100
                    },
                    series: [
                        {
                            name: "Event distribution",
                            type: 'pie',
                            radius: ['60%', '70%'],
                            center: ['50%', '55%'],
                            itemStyle : {
                                normal : {
                                    label : {
                                        show : true
                                    },
                                    labelLine : {
                                        show : true,
                                        length: 5
                                    }
                                }
                            },
                            data: [{"name":"New investment","value":6},{"name":"Merger and Acquisition","value":9},{"name":"Bankruptcy","value":3},{"name":"New business relation","value":8},{"name":"Official resignations and appointments","value":1},{"name":"End of activity","value":1},{"name":"New market","value":2},{"name":"New product","value":3},{"name":"New unit","value":1}]
                        }
                    ]
                }
            };

其他信息 (Other comments)

[rodickmini]

same question

[100pah]

Indeed it is a problem.
But \n can be added to label.
Does it temporarily solve the problem in you case?

See http://gallery.echartsjs.com/editor.html?c=xryc4E9Xa&v=2

[rodickmini]

@100pah Thanks! That's a reasonable solution for me!

[rodickmini]

@100pah but the corresponding legend MUST also contain \n, which is not elegant.

[sbokorna]

The "/n" help but is not a concrete solution.
See what happend when too much data and "\n"

[PLPeeters]

I agree. This is something the library should handle on its own on the first render and whenever the window gets resized, otherwise there will be \n's when they aren't needed or some will be missing when needed.

[zhangya5847]

I have the same question.

[surjikal]

This is still a problem.

[kuhlebrock]

Are there any updates on this?

[theNotoriousHxc]

Any updates on this one?

[RudmanMario]

Any solution for this?

[Chandru1427]

Any updates

[Ovilia]

Hi, since this feature is required frequently, we put it in our priority list and will dive into it.

[s-mikulich]

I met the same problem in a pie chart.

[dann95]

same issue here.. mainly on mobile...
Not only on pie charts..

[REPTILEHAUS]

Same problem. Any solutions ?

[pauturvalles]

Same problem as well

[milesbeyond]

I also have this issue. Is the team still trying to resolve this bug?

[pieroliviermarquis]

+1

[nk2580]

are we accepting pull requests on this issue?

[Ovilia]

@nk2580 Yes. It's very welcomed.
But make sure to test the extreme cases, like when there are a large amount of labels, or long text.

[zakjan]

Is the bug fixed?

[dann95]

Is it fixed?

[hon2a]

@Ovilia Marking a ticket as FAQ, scheduled, _and_ stale does little to clarify the team's stance on this. Should we open a new issue for the same thing to indicate it's very much still an issue? Wouldn't it make more sense to just keep this one open?

---

_The implementation of label positioning in pie charts simply isn't properly thought through. While there's clearly some attempt at not letting the labels overflow vertically, horizontal overflow is ever-present and impossible to deal with. A way to fix this is e.g. to make the starting point of the label line flexible, i.e to no longer make it always start in the middle of the pie item._

[Ovilia]

A stale label was added by mistake because we tried to close some too old issues.
Label is an enhancement we wish to include in our next big release. It may still take months' work before the v5.0 releases, but we wish to improve the layout of labels, like not going outside of canvas, not collapse with other components and so on. There are much to consider and a full design should be involved.

[molbal]

Is there an update on this?

[Frimys]

It's still an issue... any updates?

[brsdv]

Seriously, you can’t fix this bug for so long?
For a long time, Could issue a temporary fix!

[Ovilia]

This has been fixed. Labels will have "..." when too long. See https://echarts.apache.org/examples/zh/editor.html?c=pie-alignTo .

[molbal]

Thank you for the help Olivia!
I updated to the new 4.8.0 version and I can confirm the solution works.

Before:

After:

[dadazhouRenee]

But label still out of range when set containLabel，is there a clear solution to this problem ?

[haoye999]

This has been fixed. Labels will have "..." when too long. See https://echarts.apache.org/examples/zh/editor.html?c=pie-alignTo .

It will be invalid when i set formatter