Favorite Javascript Libraries for Dashboards
This is a short list that is composed of my favorite Javascript libraries used when creating dashboards. I don’t use large front-end frameworks since my applications are usually served as a static site, and front-end development is not my main responsibility; moreover, I primarily rely on Astro and Tailwind for development, with the majority of data handling and visualization done through these libraries.
All of these are free and open-source. Additionally, since these are FOSS, there are many projects that either supplement the functionality with plugins or use these as a cornerstone to expand upon in their own framework.
Libraries
Alpine.js
Alpine.js is a simple and lightweight JS framework that provides interactivity to your application without integrating one of the larger frameworks or applying a complex setup. It uses a declarative syntax and data binding to provide the functionality that can fully support the needs of small to medium-sized apps. It works by adding custom attributes straight into your HTML markup, where you can define dynamic data, handle events, perform DOM manipulation, and create conditional and interactive structures.
In this example, the parent div uses the tag x-data with is set to a JSON object which you can use to also store methods and getters. Any of this node’s internal children will have access to this data. Within this div is also a button with the directive @click and a div with the attribute x-show. @click is short-hand for x-on:click, which evaluates whatever you set it to on a click event. In this case, you would be changing the state of the variable open. x-show is bound to the state of open. If true, it simply changes the visibility of that element.
Currently, there are a total of 18 directives, 9 properties, and 3 methods. The minified and gzipped version is typically around 8–9kb in size. They do have Alpine UI Components which costs $129 for lifetime access.
Lodash.js
Lodash is a JS utility library that simplifies working with arrays, numbers, objects, strings, etc. by providing a pretty comprehensive set of functions. This thankfully allows me to not cloud my JS files with my attempts at complex data manipulation such as iterating over arrays, filtering data, transforming objects, performing calculations, or any combination. Lodash also employs methods like memoization, lazy evaluation, and smart algorithms to ensure optimal performance, even when dealing with large data sets.
The gzipped version of the core build is ~4kb (full build = ~24 kB).
Grid.js
Grid.js is a lightweight and versatile JavaScript library that provides a powerful and customizable grid component for displaying and manipulating tabular data. This works well with my structured data, and setting it up is extremely easy due to their simple and intuitive API. It provides options for customizing the appearance, behavior, and functionality of the grid (i.e. to enable sorting, it’s just a sort: true added to the root)
It also leverages virtual rendering techniques, which means that it only renders the visible portion of the grid while efficiently managing the underlying data. This improves the performance and responsiveness of the grid, allowing it to handle a significant amount of rows without sacrificing user experience.
The minified and gzipped project is ~12kb with all the plugins.
ECharts.js
Any dashboarding list is not complete without a visualization tool. For me, I’ve decided to go all-in on ECharts.js due to its simplicity and its incredible amount of chart types, including the basic line, bar, pie, scatter, and radar (basically any type a KPI dashboard will ever need). ECharts also allows you to combine multiple chart types into a single visualization. The API is easy to use and the amount of examples is incredible. Every feature used in creating dashboards is probably used in one example or more.
Like other popular charting libraries, interactivity is another strength of ECharts, supporting interactive actions such as click events and custom event handling and allowing developers to create interactive dashboards and data-driven applications. The dataset attribute also makes it pretty easy to use by submitting your data as an array of lists or objects. encode then lets you either use the value’s location in an array or the object name to refer to the values that should make up your data series.
The project originated at Baidu, which has been compared to a Chinese Google; however, Echarts has been a project of the Apache Software Foundation since 2020 after entering the Apache Incubator in 2018. I have another article building a very simple dashboard with Astro, TailwindCSS, and ECharts.js.
Conclusion
My dashboards are relatively simple in providing an interactive way to go through large datasets. That’s it. I don’t really need to jump into larger frameworks to create a full-blown application. The simplicity allows me to spend more time doing back-end work without the threat of having to spend time working on and maintaining an app with a large technical debt. These libraries are all FOSS, meaning there are plenty of resources to ask for help plus communities supporting their development. There is also no chance of vendor lock.
