Example of Pivot Chart Fieldlist in Javascript Pivot Table Control

/
/
Pivot Chart with Field List

This sample demonstrates rendering a pivot table and pivot chart along with the Excel-like field list feature. It also provides interactive controls to toggle the toolbar and dynamically switch between different display modes.

More Details...

Description

This example showcases the Syncfusion Pivot Table component alongside a Pivot Chart and a field list rendered statically within a sidebar layout. The static field list allows users to configure and customize the report by dragging and dropping fields into the appropriate sections such as rows, columns, values, and filters—without relying on a popup interface. This enhances accessibility and usability, especially in wide-screen or dashboard environments. The Pivot Table component supports three display modes, which are implemented in this sample and can be configurable using the displayOption.view property: Table : Displays only the pivot table (default). Chart : Displays only the pivot chart. Both : Displays both the pivot table and pivot chart. A Primary View dropdown lets users choose whether to prioritize the chart or table when both are shown. Additionally, the Show/Hide Toolbar toggle controls the visibility of the built-in toolbar, which includes options for switching views and chart types. Injecting Module: The pivot table features are segregated into individual modules. To take advantage of chart and toolbar support, we need to inject the PivotChart module using the PivotView.Inject(PivotChart, Toolbar) method. More information on the pivot chart can be found in this documentation section.