DevExtreme v23.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Auto-Calculated Bar Width

Documentation

This demo illustrates a common issue in multi-series charts. Individual series can skip values for certain arguments or include zero values. In such cases, arguments can display a different number of bars and cause uneven gaps between data.

The ignoreEmptyPoints property allows you to change this behavior. If you set it to true, bars increase their width to fill the gaps. In this demo, you can see how the property affects the following arguments: Iran, Canada, Saudi Arabia, and Mexico.

www.wikipedia.org
Backend API
$(() => { $('#chart').dxChart({ palette: 'soft', dataSource, commonSeriesSettings: { ignoreEmptyPoints: true, argumentField: 'state', type: 'bar', }, series: [ { valueField: 'oil', name: 'Oil Production' }, { valueField: 'gas', name: 'Gas Production' }, { valueField: 'coal', name: 'Coal Production' }, ], legend: { verticalAlignment: 'bottom', horizontalAlignment: 'center', }, export: { enabled: true, }, title: 'Percent of Total Energy Production', }); });
<!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="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.light.css" /> <script src="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; }
const dataSource = [{ state: 'China', oil: 4.95, gas: 2.85, coal: 45.56, }, { state: 'Russia', oil: 12.94, gas: 17.66, coal: 4.13, }, { state: 'USA', oil: 8.51, gas: 19.87, coal: 15.84, }, { state: 'Iran', oil: 5.3, gas: 4.39, }, { state: 'Canada', oil: 4.08, gas: 5.4, }, { state: 'Saudi Arabia', oil: 12.03, }, { state: 'Mexico', oil: 3.86, }];