echarts

When I update the data to show on a funnel chart using echarts the labels go off the screen


Here is a chart that I am having trouble with.

EchartExample

The problem is if you change any of the data values the labels disappear on the funnel chart. My goal is to keep the labels on the right side of the screen even if I change data values.

dynamically update any of the values without reloading chart.

data: [
        { value: 60, name: 'Visit' },
        { value: 40, name: 'Inquiry' },
        { value: 20, name: 'Order' },
        { value: 80, name: 'Click' },
        { value: 100, name: 'Show' }
      ]

I need to have the label on the right side of the screen and the only way I know how to do that is with the labelLayout option. The thing is, when that option is included the problem occurs.

I have tried looking through the documentation and other questions with echarts but have come up empty.

I am working on an angular 17 project but you can see the problem in the example above using the echarts website.


Solution

  • This issue seems to be related to animation. If you set animation: false it will not occur.

    Example