LightningChart JS Logo

DataGrid Component

An additional grid control for LightningChart JS compatible with all library visualizations.

Discover DataGrid
v.5.0.3
DataGrid image

A top-level UI component

Use the DataGrid component as a standalone control or as part of a dashboard. Integrate it into front-end apps or use it together with other LightningChart JS visualizations and controls.

A limitless grid control

The new DataGrid control is flexible and features an unlimited number of rows and columns. Use it as a data table, a drill-down menu, or a sophisticated real-time status monitor.

Supporting all types of content

Complement your data analysis with rich and varied content formats including text, numbers, images, icons, spark charts, and more. Easily specify the content type at any time such as when the data change.

Explore the features

Merging

Merging Datagrid

The component features the ability to merge cells, providing an even more organized and efficient way to analyze and present data. This unique feature adds versatility to your data visualization process and takes your data analysis to the next level

Spark Charts

spark chart Datagrid

Effortlessly present and analyze large data sets with the in-cell DataGrid visualization options. Choose from a variety of chart types, including sparklines, area charts, bar charts, win-loss charts, and pie charts, to effectively display and understand your data on a smaller scale.

Fully customizable

customizable Datagrid

Cell properties such as font, padding, or borders are fully customizable and can be individually assigned. This component has built-in functionalities for highlighting cells, rows, and columns.

Dynamic Coloring

dynamic coloring Datagrid

Both cells and backgrounds support dynamic coloring based on data values. This enables the grid component to be used as a heatmap.

Event API

event API Datagrid

Add custom user-interactions to the DataGrid component based on users’ actions, such as activating a drilldown based on a mouse click or hover.

DataGrid Examples

How to integrate DataGrid into my LightningChart JS app?

The grid component is a fast, advanced, and highly-customizable tool for a more detailed data analysis that supports a wide variety of content formats and in-cell visualizations.

You can use the DataGrid component as an add-on to LightningChart JS v.4.0 or higher. To use DataGrid, you will need to purchase a license.

You can always test the DataGrid component before purchasing. To do so, please visit our Interactive Examples.

Get DataGrid

Starting from $590 / developer

See Pricing
JavaScript Monitoring DataGrid

Use Cases

  • This is a drill-down type use case of LightningChart Data Grid in a cryptocurrency context. The grid is used to display a lot of top-level information about several items. Here we can see icons, spark charts, dynamic coloring, highlighting, and mouse events being used.

  • Here we see a real-time Data Grid use case. This chart and grid show the same data, but in different formats. This is a good demonstration of the real-time capabilities of Data Grid.

  • This application shows the idea of heatmap coloring in a real-time case. Understanding the numerical data takes time for the human eye. On the other hand human eye is more sensitive to color changes

Add higher accuracy to your data analysis within LightningChart applications with the DataGrid UI component

Get DataGrid

Starting from $590 / developer

See Pricing