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:

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!

Free DevExpress Products - Get Your Copy Today