How to dynamically set the height of Pivot Table and Chart based on the row count?

This article explains how to dynamically set the height of Pivot Table and Chart based on the row count.

Dynamically set the height of Pivot Table and Chart based on the row count

In certain scenarios, you may want to dynamically adjust the height of your pivot table and chart based on the row count. To achieve this, you can use the enginePopulated and chartSeriesCreated events in the pivot table. These events allow you to calculate the number of rows in the pivot table and adjust the height accordingly. Here’s an example of how to achieve this:

[index.js]

var pivotObj = new ej.pivotview.PivotView({
    enginePopulated: function (args) {
        var columnCount = 0;
        var rowCount = 0;
        if (args.pivotValues != null) {
          for (var i = 0; i < args.pivotValues.length; i++) {
            if (args.pivotValues[i] && ej.base.isNullOrUndefined(args.pivotValues[i][0])){     
              columnCount++;
            } else {
              rowCount++;
            }
            // here height is set based on the number of rows to the pivot table view.
            pivotObj.height = ((rowCount <= 20 ? rowCount : 20) * pivotObj.gridSettings.rowHeight) + 
                (columnCount * pivotObj.gridSettings.rowHeight) + (pivotObj.showToolbar ? 
                    pivotObj.element.querySelector('.e-pivot-toolbar').offsetHeight : 0) + 20;
          }
        }
      },
      chartSeriesCreated: function () {
        if (pivotObj.displayOption.view === 'Both' && pivotObj.chart) {
        // here height is set based on the number of rows to the pivot chart view
          pivotObj.chart.height = pivotObj.height.toString();
        }
      },
});

In this code example, the enginePopulated event is triggered when the pivot table engine is populated with data. Inside the event, you can calculate the number of rows and columns in the pivot table. Based on these values, you can set the height of the pivot table dynamically by multiplying the row count by the row height and adding any additional elements heights (in this case, we have considered the height of the toolbar).

Similarly, the chartSeriesCreated event is triggered when the pivot chart series is created. Inside the event handler, you can check if the pivot view is set to display both the table and chart. If so, you can set the height of the pivot chart by assigning the same height value as the pivot table.

The following GIF image portrays the results of the code snippet mentioned above.

GIF

For a practical demonstration, refer to the sample of stackblitz.

Conclusion:
I hope you enjoyed learning how to dynamically set the height of Pivot Table and Chart based on the row count.

You can also refer to our Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!