Javascript Data Visualization With LightningChart JS

JavaScript Data Visualization with LightningChart JS



Let's go back in time to a handful of years when there didn't exist any general data visualization tool that utilized hardware acceleration. During this time, people had very limited resources to work with, and data sets with only as little as 10,000 items were quite troublesome to handle.

For reference, here is an 8-year-old Stack overflow thread that involves a developer struggling to visualize a data set with 10^5 points. This question is quite popular, having at this time >27k views, and expectedly, there's a plethora of comments and answers trying to resolve the issue.

Some answers directly say that there are too many data points while others refer to some considerably complex-sounding data management patterns to optimize the visualization. Ultimately, even the accepted answer leads to stating that the amount of data points is simply too much for this particular visualization framework.

Introducing Advanced Javascript Charting Libraries 

Now, since we're eight years late to the party, naturally we are not solving the original problem here, but I, however, went ahead and posted an answer that might make the initiator of this thread check their eyesight before believing : 

  1. Import LightningChart JS
  2. Write ~10 lines of code.

You now have a scatter chart with 100, 000 data points (10x more than what was asked) ready to roll in ~100 milliseconds with all possible lightning-fast interactions, zooming, panning, and cursors. This chart will work in more than 99% of modern devices from personal computers to laptops, phones to even embedded systems.

lightningchart js data points

Quite the difference in 8 years, don't you think? However, this isn't simply due to time passing and technology getting better. Even to this day, a lot of people still use old data visualization tools with this kind of performance restrictions.

Browse 2022 LightningChart JS charts

Let's look at another example, a 3-year-old Stack Overflow thread where someone is struggling with a zoomable heatmap chart. Here is a quote from the thread owner :

"Is there anything to make it faster/smoother or is it just too many points and that is the best I can have? I was wondering if there is some trick to make it lighter for the browser while keeping enhancements like tooltips."

I will spoil the answers to this question, several people are suggesting different sorts of tricks involving hundreds of lines of code that will slightly improve the performance. Some people suggest implementing their rendering framework with more efficient technologies - not very helpful!

Javascript Data Visualization with LightningChart

We once again posted a code snippet showing how this issue becomes a non-issue when using modern tools. LightningChart JS requires no extra tricks and EASILY produces a heatmap chart with instantaneous zoom interactions.

The poor-performing heatmap in question had a data set with 360 x 75 data points coming to a total of 27 000 data points instead Lightning Chart JS hits billions of data points.

lightningchart js heatmap

Sometimes, words travel slow on the internet, but we are getting there. Every day more people experience LightningChart JS for the first time and realize that this is not the future - this is the present.

So what are you waiting for? Get hands-on experience with the best JS charting libraries in the market and explore a plethora of data visualization tools. Remember, our community license is 100% free for non-commercial and study purposes.

Try it now!

Get the Free Community License