Client-Side Story

HTML 5 Charts - Adaptive Layout (Now available in 14.1)

In v14.1, the DevExtreme team introduced an adaptive (or responsive) layout into our client-side HTML5/JavaScript charts library.

How it works:

If you do not specify a container chart size or just specify it as a percentage, when you resize a page with a chart the chart elements will be resized accordingly. You can either allow end-users to resize a page with pre-defined resize settings for your charts, or define custom ones.

To specify the minimum resize limit, use the height and width options of the adaptiveLayout object. By default, they are equal to 80 pixels.

When a chart container becomes too small for the widget to display all its elements, the adaptive layout removes accessory widget elements, saving space for the most important ones.

The elements will be removed in the following sequence:

1. Chart margins

2. Title margins or the whole title

3. Legend

4. Axis titles

5. Axis labels

6. Point labels (you can save them by setting the adaptiveLayout.keepLabels option to true).

Published Jul 17 2014, 07:45 AM by
Bookmark and Share


James Foye

That seems pretty cool.

July 17, 2014 9:40 AM

Reinier van der Togt

Really good news!

August 4, 2014 6:22 AM

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