JavaScript/jQuery Charts - Auto-Calculated Bar Width

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

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

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" lang="en"> <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=5.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/24.1.7/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, }];