PolarChart - 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="polarChartContainer"></div>

CSS

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

JavaScript

var dataSource = [
		{ arg: "USA", apples: 4.21, oranges: 7.47 },
    { arg: "China", apples: 3.33, oranges: 5 },
    { arg: "Turkey", apples: 2.6, oranges: 1.71 },
    { arg: "Italy", apples: 2.2, oranges: 2.39 },
    { arg: "India", apples: 2.16, oranges: 6.26 }
];
 
$(function () {
    $("#polarChartContainer").dxPolarChart({
        dataSource: dataSource,
        useSpiderWeb: true,
        commonSeriesSettings: {
        		type: "line",
            label: {
            		visible: true,
                connector: { visible: true }
            }
        },
        series: [
        		{ valueField: "apples", name: "Apples" },
            { valueField: "oranges", name: "Oranges" }
        ],
        resolveLabelOverlapping: "hide",
        adaptiveLayout: {
        		width: 800,
            keepLabels: false
        }
    });
});