Chart - Adaptive Layout

Narrow down the preview area to make the widget adapt to the new size.

HTML

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<script src="https://cdn3.devexpress.com/jslib/16.1.7/js/dx.viz.js"></script>
<!-- Narrow down the preview area to make the widget adapt to the new size -->
<div id="chartContainer"></div>

CSS

#chartContainer {
    max-width: 800px;
    margin: 0 auto;
}

JavaScript

var data = [
    { type: 'Oranges', brazil: 18279309, china: 2865000, usa: 7357000 },
    { type: 'Grapefruit', brazil: 72000, china: 547000, usa: 1580000 },
    { type: 'Lemons and limes', brazil: 1060000, china: 745100, usa: 722000 },
    { type: 'Tangerines, etc.', brazil: 1271000, china: 14152000, usa: 328000 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: data,
        commonSeriesSettings: {
            argumentField: 'type',
            type: 'bar',
            label: {
                visible: true,
                format: 'largeNumber'
            },
            tooltips: {
              enabled: true
            }
        },
        options: {
        	tooltips: {
          	enabled: true
          }
        },
        series: [
            { valueField: 'brazil', name: 'Brazil' },
            { valueField: 'china', name: 'China' },
            { valueField: 'usa', name: 'USA' }
        ],
        valueAxis: {
        		title: "Produced",
            label: { format: 'largeNumber' }
        },
        adaptiveLayout: {
        		width: 400,
            keepLabels: false
        }
    });
});