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 option 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 option affects the following arguments: Iran, Canada, Saudi Arabia, and Mexico.

See more Hide details

Prev Demo Next Demo

www.geohive.com

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.

Send Feedback

Thank you!
We appreciate your feedback.

jQuery

Angular

Vue

React

AngularJS

ASP.NET Core

ASP.NET MVC

Copy to CodePen

Apply

Reset

<!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/20.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/20.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" ng-app="DemoApp" ng-controller="DemoController"> <div id="chart" dx-chart="chartOptions"></div> </div> </body> </html>

#chart { height: 440px; }

var 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 }];