Skip to main content

Dynamic Grid Charts

Grid charts can be static or dynamic. Static-grid charts allow placing data series in different cells but the number of these cells is fixed based on the configuration. Dynamic grids on the other hand are also based on the data.

Imagine you have a chart or a static-grid and now want to analyze the same at a more granular level. Dynamic grid charts allow you to organize the data in a grid layout where each cell along the row and/or column is based on a separate partitioning data series that adds an extra level of detail.

Let's first setup a multi-dimensional data cube for the examples using the sales orders data.


Dynamic column layout

Imagine you want to view Revenue and Avg Revenue by Region but then see this information for each Sales Channel. This partitioning of Regional sales data by Sales Channel is achieved by the Dynamic Grid charts. Below the colsBy() API is used to specify the partitioning.


Dynamic row layout

Partitions can also be organized as rows.


Dynamic grid layout

Partitions can also be organized both as rows and columns using separate dimension for each axis.


Columns of static-grids

It is possible to first create static-grid and then partition it to create a grid.

Chart per dimension value

There will always be two rows one for each metric in the configuration but there can be many columns one for each Sales Channel value. In this data set, the only values are online and offline.

Rows of static-grids

It is also possible to organize static-grids as rows.

Best Practice

Though not required, when organizing the dynamic grid as rows, it is best to organize static-grid as columns and vice-versa.

Dynamic grid of static-grids

It is possible to take a static-grid and organize it into a dynamic grid.


Dynamic sized charts

The data distribution can greatly impact the visibility of a dynamic grid chart when it is based on a fixed size. When space is constrained, then it is possible to have a dynamic sized chart by specifying the dimensions for the individual subchart. The above example as dynamic sized chart below.

Brush linking

Brush linking is currently not supported for dynamic grids.


Dynamic charts can get very big if the row/col dimensions have high cardinality. Browsers have limits on the size of canvas/svg. Hence, dynamic charts will only work with low cardinality dimensions. Currently only upto 100 rows , 100 columns and 200 overall cells are supported. This restriction may be removed or the limits are increased in the future with viewport virtualization technology or other means of rendering such large charts. However, it should be noted that it would be hard to make any sense out of a very large grid of charts and these trellis charts are most useful when used with low-cardinality dimensions.