apache echart always renders twice, why?

[depley]

Question

Apache Echart is always rendering twice.
To Illustrate that I added an event: chart.on('chart:finished', lambda e: print(f"finished: {datetime.now()} {more=}"))
This event is always triggered twice.
Why? Is there a way to only trigger once the rendering?

Here are the outputs on visiting the 2 routes of the code below:

# 3 datapoints on '/'
finished: 2025-03-19 14:08:28.474418 more=False
finished: 2025-03-19 14:08:28.488923 more=False

# 50_000 datapoints on '/more'
finished: 2025-03-19 14:08:41.316395 more=True
finished: 2025-03-19 14:08:44.443098 more=True

This is problematic when more data is rendered.
Even worse when you want to interact with the chart based on a selection outside, cause the chart then waits until second finish and after that starts to render the changed stuff.

from datetime import datetime
import random

from nicegui import ui


RELOAD = False
APP_TITLE = 'echart runs twice, reload or not'
FAVICON='📊'

#https://github.com/zauberzeug/nicegui/issues/794
def run_app():
    run_kwargs = dict(
        reload=RELOAD,
        title=APP_TITLE,
        favicon=FAVICON,
    )
    if RELOAD and __name__ == '__main__':
        ui.run(**run_kwargs)
        return
    
    print("Building UI")
    ui.run(**run_kwargs)


def create_chart(more = False):

    data = [ [1,2], [2,1], [3,3] ]
    more_data = [ [random.randrange(100),random.randrange(100)] for _ in range(50_000) ]

    chart = ui.echart(
        options={
            'dataset': {
                'source': more_data if more else data,
            },
            
            'xAxis': {
                'type': 'value'
            },
            'yAxis': {
                'type': 'value'
            },
            'series': [
                {
                    'type': 'scatter', 
                }
            ]    
        }
    )
    chart.on('chart:finished', lambda e: print(f"finished: {datetime.now()} {more=}"))


@ui.page('/')
def show_less_data():
    ui.link('more','/more')
    create_chart()

@ui.page('/more')
def show_less_data():
    ui.link('less','/')
    create_chart(more=True)


if __name__ in {"__main__","__mp_main__"}:

    run_app()

[evnchn]

I have identified the reason this this bit of code. Commented it out and it only prints finished once.

nicegui/nicegui/elements/echart.js

Lines 59 to 63 in 8d48ec7

	const createResizeObserver = () => {
	new ResizeObserver(this.chart.resize).observe(this.$el);
	this.chart.off("finished", createResizeObserver);
	};
	this.chart.on("finished", createResizeObserver);

But, I think it is simply how Apache EChart works. Perhaps your logic should deduplicate the finished events.

[evnchn]

So, for a summary:

• No way to get around having multiple finished events fired, with the built-in behaviour of createResizeObserver, and the possibility of mouseover.
• Suggestion is to do this:

called_before = False
def on_chart_finished(e):
    nonlocal called_before
    if called_before:
        return
    called_before = True
    print(f"finished: {datetime.now()} {more=}")
chart.on('chart:finished', on_chart_finished)

[falkoschindler]

@evnchn But isn't it a valid question why ui.echart is rendering the "more" point cloud twice?
By the way: PR #3056 introduced the resize observer.

[depley]

The emitted event is not the crucial point, don't listen to it in my application.
It's problematic that every chart is rendered twice.
Totally okay when it takes some time to render a chart with many datapoints, but only once.
I want to skip the rerendering.

[evnchn]

If I read the code correctly, the point cloud is rendered twice:

• Once on page load,
• then another time when createResizeObserver added the ResizeObserver which renders again.

[evnchn]

I personally don't see a way to do that given our existing functionality.

However, I want to remind you that rendering too many points on the browser is not a good idea.

#4493
https://github.com/zauberzeug/nicegui/wiki/FAQs#why-am-i-not-receiving-events-using-elementon

[falkoschindler]

Here is a more handy reproduction:

ui.echart({
    'xAxis': {'type': 'value'},
    'yAxis': {'type': 'value'},
    'series': [{'type': 'scatter', 'data': [[x, x] for x in range(50_000)]}],
})

And here is a reproduction with plain HTML/JavaScript:

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
  </head>
  <body>
    <div id="chart" style="width: 600px; height: 400px"></div>
    <script>
      const el = document.getElementById("chart");
      const chart = echarts.init(el);

      const createResizeObserver = () => {
        new ResizeObserver(chart.resize).observe(el);
        chart.off("finished", createResizeObserver);
      };
      chart.on("finished", createResizeObserver);

      chart.setOption({
        xAxis: { type: "value" },
        yAxis: { type: "value" },
        series: [{ type: "scatter", data: Array.from({ length: 50000 }, (_, i) => [i, i]) }],
      });
    </script>
  </body>
</html>

Removing the resize observer prevents the chart from rendering twice. I still wonder if we really need this observer or if we can solve PR #3056 differently.

[depley]

Totally agree!
Thought about the options due to this 2 years open issue on this topic. Maybe there is currently no solution that fits.
[Feature] Auto resize (responsive) #17428

The last suggestion there is using this in the callback:
(entries) => this.frameId = this.window.requestAnimationFrame(() => this._chart.resize())

Currently don't understand if this can help somehow.

[evnchn]

The last suggestion there is using this in the callback:

That suggestion was from Nov 9, 2023...

---

I think that my recommendation is, if we do not know how to find one best "end game" method, nor figure out what is the switchover point, then we do not further expose a choice.

We are, after, working on NiceGUI, not the PainGUI or the AnnoyingGUI. 😉

---

I propose, that we read the config passed in via the echarts, and use the double-render animation_safe method if there is an animation, and the single-render method if there is no animation.

Reasoning being:

• The animation lags when there are many points anyways, so why animate
• Those who care about animation would probably optimize it to do the animation using Tailwind CSS styles, not whatever Apache EChart is offering.

Then, it does in-fact happen automatically, matching the expectation of:

Even if we need to choose between two or three alternatives, it should happen automatically

[depley]

I like the idea for user simplicity.
Would though suggest a force_resize_behavior if the nice automatic behaviour doesn't work in the specific case and one need to dig deeper.

force_resize_behavior: None | Literal['animation_safe','render_once_safe','not_responsive'] = None

[evnchn]

Not sure, since that is still quite complex, if the automatic solution already have a balance.

Also, adding a parameter to a function is sort of irreversible, and on other discussions we have already establish not to do it unless it is necessary

Given that it is easy (?) to make your own version of ui.echart then import it yourself, I would more recommend that we can make several versions of the element with different behavior in the FAQ, and people who need some behavior that is different to the automatic one can copy the custom ui.echart and use it.

[depley]

I've created a custom version nicegui-custom-echarts.
That was pretty easy and straight forward.
Nice!

[falkoschindler]

I just created issue #4535 as a fresh starting point for solving this problem and to track the progress of this bug. Let's continue our discussion over there.