# Plotly.js performance when data points reaching 180k

**URL:** <https://community.plotly.com/t/plotly-js-performance-when-data-points-reaching-180k/1069>\
**Category:** plotly.js\
**Created:** [May 19, 2016, 8:12am UTC](https://community.plotly.com/t/plotly-js-performance-when-data-points-reaching-180k/1069 "2016-05-19T08:12:52Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![saad\_bin\_abid](https://avatars.discourse-cdn.com/v4/letter/s/85e7bf/32.png) [@saad\_bin\_abid](https://community.plotly.com/u/saad_bin_abid)\
**Post date:** [May 19, 2016, 8:12am UTC](https://community.plotly.com/t/plotly-js-performance-when-data-points-reaching-180k/1069/1 "2016-05-19T08:12:52Z")

</div>

Thanks for reply. I have managed to findout that the function  
Plotly.newPlot() is acting extremely slow where as the 182840 entries  
are calculated quite fast whereas when the function Plotly.newPlot is  
called with traces the browser hangs and comes back after many  
minutes… are there any other faster functions available in plotly…  
the performance at least in my browser is very poor… your help is highly appreciated I have also looked at : [https://jsfiddle.net/80satht7/1/](https://jsfiddle.net/80satht7/1/) but managed to findout that its working fine… What I may be doing wrong I am not sure…

---

<div class="post-metadata">

**Author:** ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)\
**Post date:** [May 20, 2016, 2:20pm UTC](https://community.plotly.com/t/plotly-js-performance-when-data-points-reaching-180k/1069/2 "2016-05-20T14:20:16Z")

</div>

182,840 entries is a lot of data for our svg `scatter` trace type, but should be handled without any issues by our WebGL trace type `scattergl`.

See [https://jsfiddle.net/5ub875u2/1/](https://jsfiddle.net/5ub875u2/1/)

---

<div class="post-metadata">

**Author:** ![destrada](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/destrada/32/984_2.png) [@destrada](https://community.plotly.com/u/destrada)\
**Post date:** [July 12, 2017, 8:59pm UTC](https://community.plotly.com/t/plotly-js-performance-when-data-points-reaching-180k/1069/3 "2017-07-12T20:59:46Z")

</div>

@etienne  
I’m testing ‘scattergl’ for best performance. It looks like the smaller the marker size, the better it performs for panning the plot.  
Do you have a performance suggestions for a plotly user to consider entries to ideal marker size and plot width and height?

As you can see in this test: [https://codepen.io/destrada/pen/OgrejK](https://codepen.io/destrada/pen/OgrejK)

If I make the markers bigger in size, it lags considerably when I pan the plot. When the markers are smaller then it performs better

---

<div class="post-metadata">

**Author:** ![jack](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jack/32/11_2.png) [@jack](https://community.plotly.com/u/jack)\
**Post date:** [July 12, 2017, 9:07pm UTC](https://community.plotly.com/t/plotly-js-performance-when-data-points-reaching-180k/1069/4 "2017-07-12T21:07:38Z")

</div>

> [@destrada](#):
>
> Do you have a performance suggestions for a plotly user to consider entries to ideal marker size and plot width and height?

Don’t use big markers and fix the plot size. For best performance, use `pointcloud`:

> **[Point](https://plotly.com/javascript/pointcloud/)**
>
> Detailed examples of Point Cloud including changing color, size, log axes, and more in JavaScript.

---

<div class="post-metadata">

**Author:** ![destrada](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/destrada/32/984_2.png) [@destrada](https://community.plotly.com/u/destrada)\
**Post date:** [July 12, 2017, 9:14pm UTC](https://community.plotly.com/t/plotly-js-performance-when-data-points-reaching-180k/1069/5 "2017-07-12T21:14:20Z")

</div>

Hi @jack  
What’s the difference between pointcloud and scattergl?  
Looks like there is no selection tool in pointcloud.  
Anything else fundamentally different?

---

<div class="post-metadata">

**Author:** ![jack](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jack/32/11_2.png) [@jack](https://community.plotly.com/u/jack)\
**Post date:** [July 17, 2017, 12:49am UTC](https://community.plotly.com/t/plotly-js-performance-when-data-points-reaching-180k/1069/6 "2017-07-17T00:49:00Z")

</div>

@destrada Yes, there is no selection tool, only circles for marker shape (no diamonds etc), and only numeric axes (no dates, etc). I don’t believe callback events are supported either (hover, click). `pointcloud` is the best WebGL option for **speed** with many (\>100,000) points and only zoom/pan/hover interactivity- we don’t see it used much outside that use case.

---

<div class="post-metadata">

**Author:** ![dadokkio](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/dadokkio/32/2255_2.png) [@dadokkio](https://community.plotly.com/u/dadokkio)\
**Post date:** [December 12, 2017, 8:46am UTC](https://community.plotly.com/t/plotly-js-performance-when-data-points-reaching-180k/1069/7 "2017-12-12T08:46:02Z")

</div>

Sorry if I use this old topic but my question seems to be related.  
I have a huge number of points (\>\>100,000) and I need to show them within some layout shapes.  
If I plot some of those points with scatter chart everything works properly but if I move to scattergl or pointcloud the shapes are missing (no error). Instead, other layout options like range or axes label are working.

There is a way to use shapes on scattergl or pointcloud charts?

---

<div class="post-metadata">

**Author:** ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)\
**Post date:** [December 12, 2017, 2:06pm UTC](https://community.plotly.com/t/plotly-js-performance-when-data-points-reaching-180k/1069/8 "2017-12-12T14:06:55Z")

</div>

> [@dadokkio](#):
>
> There is a way to use shapes on scattergl or pointcloud charts?

Not right now, but soon [regl-scatter2d by dy · Pull Request #1869 · plotly/plotly.js · GitHub](https://github.com/plotly/plotly.js/pull/1869#issuecomment-350350160)

---

<div class="post-metadata">

**Author:** ![Eman](https://avatars.discourse-cdn.com/v4/letter/e/94ad74/32.png) [@Eman](https://community.plotly.com/u/Eman)\
**Post date:** [July 7, 2021, 12:07pm UTC](https://community.plotly.com/t/plotly-js-performance-when-data-points-reaching-180k/1069/9 "2021-07-07T12:07:24Z")

</div>

> [@etienne](#):
>
> now

Hello,

I would like to know that is the max number of points can scattergl plot ?

If I would like to plot around 300 Million points using scattergl, Is it possible ?
