# Fast live-time line charts comparison

**URL:** <https://discourse.nodered.org/t/fast-live-time-line-charts-comparison/61342>\
**Category:** Dashboard\
**Created:** [15 April 2022 17:51 UTC](https://discourse.nodered.org/t/fast-live-time-line-charts-comparison/61342 "2022-04-15T17:51:22Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![davidz](https://avatars.discourse-cdn.com/v4/letter/d/a88e57/32.png) [@davidz](https://discourse.nodered.org/u/davidz)\
**Post date:** [15 April 2022 17:51 UTC](https://discourse.nodered.org/t/fast-live-time-line-charts-comparison/61342/1 "2022-04-15T17:51:22Z")

</div>

For folks who want to have a fast live-time line chart, there is an option of Uplot (see [examples here](https://discourse.nodered.org/t/u-plot-charts-simple-live-data-example/45453) and [beta ui version here](https://github.com/Christian-Me/node-red-contrib-ui-uplot-charts)), which provides excellent performance to show a lot more live data than the current dashboard line chart. Recently, we found that [Echarts](https://echarts.apache.org/en/index.html) is also a good option. We did a quick comparison of their performance with our application (wireless vibration monitoring). They are tested under exactly the same condition. Please look at the CPU usage at the top left corner. Uplot has about 122% CPU usage, and Echarts has about 121% CPU usage.

1. Uplot for four [wireless vibration sensors](https://www.broadsens.com/sensors/wireless-low-power-sensors/) in parallel sampling at 3.2kHz  
 ![Uplot four wireless vibration sensors parallel monitoring](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/d/6d47406b195ae1134f35f1ce1d5ebfa1fcdd64fe.jpeg)
2. Echarts for four [wireless vibration sensors](https://www.broadsens.com/sensors/wireless-low-power-sensors/) in parallel sampling at 3.2kHz  
 ![Echarts four wireless vibration sensors in parallel monitoring](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/0/a0d227c3fd96ed21a1835803bce760b8066f0605.jpeg)

In the end, we decided to go with Echarts since we can arrange its legends similar to the current dashboard. But you can't go wrong with either. Both provide excellent performance for fast live-time line charts.  
BTW, if the current dashboard upgrades the line chart to Chart.js's 3.0 or above engine, the live-time line chart should be in the same level as Uplot and Echarts.

---

<div class="post-metadata">

**Author:** ![leeoniya](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/leeoniya/32/60722_2.png) [@leeoniya](https://discourse.nodered.org/u/leeoniya)\
**Post date:** [27 April 2022 22:21 UTC](https://discourse.nodered.org/t/fast-live-time-line-charts-comparison/61342/2 "2022-04-27T22:21:25Z")

</div>

hey @davidz author of uPlot here, so take everything i say with more than a few grains of salt 😉

i was actually curious to do a perf comparison myself between ECharts5 and uPlot for live updates, since they're now very close in initial render time. i actually expected them to also be close in streaming cases and in fact they _were_, until i toggled some [GPU flags in Chrome](https://github.com/leeoniya/uPlot#unclog-your-rendering-pipeline). once the rasterization is offloaded to another thread there is a huge perf difference, with uPlot using ~13% cpu and ECharts using 99% cpu. it's rather bizzare, and it would be intersting to see if others can reproduce this difference on other hardware.

all that being said, performance isn't everything, and ECharts5 is a great, fast choice that has many more batteries included for all kinds of charts, whereas uPlot is a 1-trick pony without a lot of extra hand-holding. ECharts4 is quite slow, though!

---

<div class="post-metadata">

**Author:** ![leeoniya](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/leeoniya/32/60722_2.png) [@leeoniya](https://discourse.nodered.org/u/leeoniya)\
**Post date:** [27 April 2022 22:22 UTC](https://discourse.nodered.org/t/fast-live-time-line-charts-comparison/61342/3 "2022-04-27T22:22:05Z")

</div>

Discourse limited me to only 2 links per post (as a new user), so...

here's my best-effort comparison, (corrections/improvements welcome!)

[https://leeoniya.github.io/uPlot/demos/sine-stream.html](https://leeoniya.github.io/uPlot/demos/sine-stream.html)  
[https://leeoniya.github.io/uPlot/bench/ECharts5-sine-stream.html](https://leeoniya.github.io/uPlot/bench/ECharts5-sine-stream.html)

---

<div class="post-metadata">

**Author:** ![davidz](https://avatars.discourse-cdn.com/v4/letter/d/a88e57/32.png) [@davidz](https://discourse.nodered.org/u/davidz)\
**Post date:** [28 April 2022 15:11 UTC](https://discourse.nodered.org/t/fast-live-time-line-charts-comparison/61342/4 "2022-04-28T15:11:36Z")

</div>

Thanks much Leon. We are a fan of uPlot too. We used Echarts since the Legend of Echarts can be formatted similar to the legend of the current NodeRED dashboard quickly (both on top with tight spacing). We could have up to 24 series, so that spacing between legends can not be too big.

Yes uPlot uses much less memory and space, which is amazing. We may use it in other cases.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [28 May 2022 15:12 UTC](https://discourse.nodered.org/t/fast-live-time-line-charts-comparison/61342/5 "2022-05-28T15:12:06Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.