PieChart - 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>
<div id="pieChartContainer"></div>

CSS

#pieChartContainer {
    max-width: 600px;
    margin: 0 auto
}

JavaScript

var dataSource = [
    { continent: 'Africa', population: 1022234000 },
    { continent: 'Antarctica', population: 4490 },
    { continent: 'Asia', population: 4164252000 },
    { continent: 'Australia', population: 29127000 },
    { continent: 'Europe', population: 738199000 },
    { continent: 'North America', population: 542056000 },
    { continent: 'South America', population: 392555000 }
];
 
$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population',
            label: {
                visible: true,
                connector: { visible: true },
                format: {
                    type: 'largeNumber',
                    precision: 2
                }
            }
        },
        type: 'doughnut',
        palette: 'Ocean',
        adaptiveLayout: {
        		width: 1
        }
    });
});