Example of Pivot Chart in React Pivot Table Component

All Controls
/
Pivot-table
/
ChartIntegration

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.

More Details...

Loading....
Description

In this sample, the pivot table plots chart based on the pivot report which is mentioned. This can be achieved by setting the property displayOption.view as Chart. The built-in options are:

Table -> Plots pivot table only which is default,

Chart -> Plots pivot chart only,

Both -> Plots 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:

Column

Line

Spline

Bar

Area

StepArea

SplineArea

StackingColumn

StackingArea

StackingBar

StepLine

Pareto

Bubble

Scatter

StackingColumn100

StackingBar100

StackingArea100

Polar

Radar

Pie

Doughnut

Funnel

Pyramid

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 PivotChart module into the services.