How to add a Chart to your Client-Side PivotGrid (DevExtreme v16.1)

A chart is a great way to visualize data. Did you know that you can easily add a chart to the DevExtreme PivotGrid widget? And the chart will update instantly with the PivotGrid:

DevExtreme Pivot and Chart Integration

In previous versions of DevExtreme (15.2 and earlier), you could display PivotGrid data with a chart but it was very complex and you had to write custom code.

Starting with the v16.1 release, we introduced a new method for chart integration - bindChart.

How does it work?

To integrate the two widgets, first create new instances of PivotGrid and Chart, then call the bindChart method:

var pivotGrid = $("#pivotContainer").dxPivotGrid(...),
      chart = $("#chartContainer").dxChart(...),
      integrationOptions = {...}
pivotGrid.bindChart(chart, integrationOptions);

The bindChart method accepts two arguments: a Chart instance and an object containing integration options. This allows you to adjust data fields, series, value formatting, panes and axes, and many others options.

Try the online demo.

Learn more in the DevExtreme documentation.

This feature is a part of the DevExtreme v16.1 release. Thanks!


Create highly responsive web apps for touch-enabled devices and traditional desktops.

From desktops to mobile devices, DevExtreme HTML5 Data Grid delivers the flexibility you’ll need to build apps that reach the widest audience and deliver touch-first user experiences to power your next great interactive website.

Download a free and fully-functional version of DevExtreme now: Download DevExtreme

no comments
No Comments

Please login or register to post comments.