Overview

The Pivot Chart organizes and summarizes business data, displaying the results in a graphical format. Key capabilities include data binding, a wide range of chart types, drill up and drill down operations, Excel-like filtering and sorting, PDF exporting, built-in aggregations, a pivot table field list, calculated fields, and common chart interactions.


Drill down and drill up

Drill down (expand) and drill up (collapse) actions visualize pivot information in both abstract and detailed views. By default, data is displayed in a grouped manner.

React Pivot Chart with drill down


Grouping bar and field list in React Pivot Chart

Grouping bar and field list

The field list and grouping bar options enable dynamic modification of reports bound to the Pivot Chart. Fields can be dragged, filtered, and sorted, and pivot reports can be created at runtime.


Chart types

The Pivot Chart supports 25 chart types for data visualization, including Line, Column, Area, Bar, StepArea, StackingLine, StackingLine100, StackingColumn, StackingArea, StackingBar, StepLine, Pareto, Bubble, Scatter, Spline, SplineArea, StackingColumn100, StackingBar100, StackingArea100, Polar, Radar, Pie, Donut, Funnel, and Pyramid. Configure each chart type through built-in series, axis, and legend options. Switch between chart types dynamically to view data from different perspectives.

React Pivot Chart with chart types


Series customization in React Pivot Chart

Series customization

Customize Pivot Chart series appearance by adjusting color, border color, and border width through built-in component properties.


Multiple axes

Plot multiple series within a single chart using multiple axes based on the value fields bound to the Pivot Chart. Tooltips provide additional information about individual series.

React Pivot Chart with multiple axes


Legend customization in React Pivot Chart

Legend customization

Legends provide information about individual series in the Pivot Chart. Show or hide series at runtime by clicking legend items. Customize legend appearance using built-in options such as position and shape.


UI interaction

Marker and cross hair in React Pivot Chart

Marker and cross hair

Markers represent data points in a Pivot Chart. Built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, and pentagons are available for customization. Images can also be used for custom point representation. Crosshairs display precise X and Y coordinate values under the pointer.

Zooming and scrolling in React Pivot Chart

Zooming and scrolling

Zoom in to examine data points within a series in greater detail at runtime. Scroll bars appear automatically when a chart area is zoomed, enabling navigation beyond the currently visible region.

Panning in React Pivot Chart

Panning

Pan across a zoomed chart by clicking and dragging to navigate and view data points in different areas of the chart.

Tooltip in React Pivot Chart

Tooltip

A tooltip provides basic information about a cell while hovering over it with the pointer.


Exporting

The Pivot Chart can be exported as PDF documents or as image formats such as SVG, PNG, and JPEG.

Exporting in React Pivot Chart


Globalization and localization in React Pivot Chart

Globalization and localization

Globalization and localization support date, currency, and number formatting based on regional settings and language preferences for Pivot Chart data presentation.



Explore all Syncfusion React components

Explore over 140+ React UI components featuring established, and production-ready controls built for modern web app development.

Scroll up icon
Syncfusion Feedback