Introducing AG Grid Sparklines

Author Credit: Mana Peirov

AG Grid now provides built-in sparklines that are seamlessly integrated with the grid whilst offering superior performance.

AG Grid Sparklines are mini charts that are designed to be rendered inside grid cells. Due to their compact and uncluttered nature, they can provide clear insights into data trends, making them an invaluable addition across many applications.

To conserve memory and enhance performance, the grid will automatically create and destroy sparklines as they are scrolled in and out of view. Resizing grid columns will also cause the sparklines to resize accordingly. These are just some of the benefits provided by AG Grid Sparklines out-of-the-box.

Enabling Sparklines

Enabling sparklines in the grid is straightforward. All you need is just one line of code: adding a single built-in cell renderer – agSparklineCellRenderer to the column definition.

Since the built-in cell renderer has access to the row and its data, it takes care of supplying the sparkline data and automatically sizes the sparkline with the correct dimensions according to the cell width and height.

Customisation

The sparklines are fully customisable, with support for line, column and area sparkline types. To cater to various requirements and data types, the sparklines offer three different x-axis types: category, number and time. This ensures X values are scaled correctly along the horizontal axis, allowing for a more accurate and meaningful representation of the data.

For convenience, we have also designed the sparklines to accept three different data formats, including: array of numbers, array of tuples and array of objects.

Special points of interest can be customised to highlight the important points for the users. For example, you could colour the columns which represent negative values in red, making them stand out to the users. It’s also possible to highlight the markers which represent minimum and maximum points, or the first and last values in the dataset. This feature allows quick comparisons across the values of a single sparkline or across multiple sparklines of the same type, which ultimately means easier and faster consumption of data.

The built-in tooltips give information about individual data points when users hover the sparklines. Given the sparklines show data trends in the context of the grid, the contents of the tooltips can be modified, allowing users the ability to display other row data.

Summary

Sparklines can be a valuable addition and we hope you can use them to deliver a rich and compact visualisation of your data right inside the grid. The mini graphical depiction of a series of values in the grid can help your users see the bigger picture behind your data, instead of just considering values in isolation. This can improve the user experience and make users more productive when using your application.

We hope you can take advantage of AG Grid Sparklines to better communicate the story of your data.

You can find the full details and further capabilities of the sparklines in our documentation.