Your search did not match any results.
Charts

Full Stacked Bar

API Reference
This demo illustrates the use of Full Stacked Bars and how you can compare the percentage value of multiple bar series for each argument. When used, the height of each bar always equals 100%. The value axis is continuous and displays a range between 0 and 100%. Hover your mouse over a bar to view the display of chart tooltips.
Copy to Codepen
Apply
Reset
$(function(){ $("#chart").dxChart({ dataSource: dataSource, commonSeriesSettings: { argumentField: "country", type: "fullStackedBar" }, series: [ { valueField: "hydro", name: "Hydro-electric" }, { valueField: "oil", name: "Oil" }, { valueField: "gas", name: "Natural gas" }, { valueField: "coal", name: "Coal" }, { valueField: "nuclear", name: "Nuclear" } ], legend: { verticalAlignment: "top", horizontalAlignment: "center", itemTextPosition: "right" }, title: { text: "Energy Consumption in 2004", subtitle: { text: "(Millions of Tons, Oil Equivalent)" } }, "export": { enabled: true }, tooltip: { enabled: true, customizeTooltip: function (arg) { return { text: arg.percentText + " - " + arg.valueText }; } } }); });
<!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 = [{ country: "USA", hydro: 59.8, oil: 937.6, gas: 582, coal: 564.3, nuclear: 187.9 }, { country: "China", hydro: 74.2, oil: 308.6, gas: 35.1, coal: 956.9, nuclear: 11.3 }, { country: "Russia", hydro: 40, oil: 128.5, gas: 361.8, coal: 105, nuclear: 32.4 }, { country: "Japan", hydro: 22.6, oil: 241.5, gas: 64.9, coal: 120.8, nuclear: 64.8 }, { country: "India", hydro: 19, oil: 119.3, gas: 28.9, coal: 204.8, nuclear: 3.8 }, { country: "Germany", hydro: 6.1, oil: 123.6, gas: 77.3, coal: 85.7, nuclear: 37.8 }];