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).