Your search did not match any results.
Charts

Spider Web

API Reference
This example displays the spider web mode of the dxPolarChart widget. . In this mode, polar chart sectors are straight rather than circular. Spider web mode is enabled using the useSpiderWeb option.
Copy to Codepen
Apply
Reset
$(function(){ $("#chart").dxPolarChart({ dataSource: dataSource, useSpiderWeb: true, series: [{valueField: "apples", name: "Apples" }, { valueField: "grapes", name: "Grapes" }, { valueField: "lemons", name: "Lemons" }, { valueField: "oranges", name: "Oranges" }], commonSeriesSettings: { type: "line" }, "export": { enabled: true }, title: "Fruit Production in 2010 (Millions of Tons)", tooltip: { enabled: true } }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.4/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type ="text/css" href ="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="chart"></div> </div> </body> </html>
#chart { height: 440px; width: 100%; }
var dataSource = [{ arg: "USA", apples: 4.21, grapes: 6.22, lemons: 0.8, oranges: 7.47 }, { arg: "China", apples: 3.33, grapes: 8.65, lemons: 1.06, oranges: 5 }, { arg: "Turkey", apples: 2.6, grapes: 4.25, lemons: 0.78, oranges: 1.71 }, { arg: "Italy", apples: 2.2, grapes: 7.78, lemons: 0.52, oranges: 2.39 }, { arg: "India", apples: 2.16, grapes: 2.26, lemons: 3.09, oranges: 6.26 }];