Mehul Harry's DevExpress Blog

This Blog


Mehul Harry is the DevExpress Web Program Manager. Follow him on twitter: @Mehulharry

Subscribe (RSS, Email)


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

Published Oct 06 2016, 08:00 AM by
Bookmark and Share


No Comments

About Mehul Harry (DevExpress)

Mehul Harry is an ASP.NET technical evangelist at Developer Express. You can reach him directly at You can also follow him on Twitter:

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at or call us at +1 (818) 844-3383


DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, Delphi, HTML5 or iOS & Android development. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2018 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners