This sample demonstrates rendering a pivot chart using pivot data. Users can explore the data through drill-up and drill-down operations by clicking the grouping labels. The field list can also be used to change the report at runtime.
In this sample, the Pivot Table component plots a chart component based on the pivot report bound to it. This can be achieved by setting the property displayOption.view to Chart. The built-in options are:Table -> Renders pivot table only, which is the default.Chart -> Renders pivot chart only.Both -> Renders both pivot table and pivot chart.
You can change the chart types using the dropdown list separately. The chart types can be set using the property chartSettings.chartSeries.type. The built-in chart types are:ColumnLineSplineBarAreaStepAreaSplineAreaStackingColumnStackingAreaStackingBarStepLineParetoBubbleScatterStackingColumn100StackingBar100StackingArea100PolarRadarPieDoughnutFunnelPyramid
In the sample, the field list option is enabled, through which you can see the result in the chart by altering the report dynamically.
The drill down/up operation in the accumulation charts, such as pie, doughnut, funnel and pyramid, can be performed using the context menu on the click over the appropriate series.
Injecting Module:
The pivot table features are segregated into individual modules. To take advantage of chart support, we need to inject the PivotChartService module into the @NgModule.providers section.
More information on the pivot chart can be found in this documentation section.