JavaScriptData Visualization with LightningChart JS

ArticleHere's a quick overview on how to start visualizing data at high-performance with the lcjs library

LightningChart JS  

LightningChart JS is the top contestant for next-generation JavaScript data visualization tools for web and mobile applications. From the start, it has been engineered to deal with maximum-size data sets and stressful usage cases.

With already 21 versions out, we have come a long way from where we started. Now would be a good time to reflect on why is LightningChart JS revolutionary.

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 of the JavaScript data visualization components, 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.

javascript scatter chart

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

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 JS

We once again posted a code snippet showing how this issue becomes a non-issue when using modern JavaScript data visualization 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 hitting billions of data points.

javascript heatmap

JavaScript Charting Controls

Sometimes, words travel slowly 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 for JavaScript data visualization.

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

Niilo Keinänen

Niilo Keinänen

CTO, LightningChart JS

LinkedIn icon
divider-light

Continue learning with LightningChart