React 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!

TS JS

Backend API

​x
 
import React from 'react';
​import {  Chart, Series, CommonSeriesSettings, Legend, Export,} from 'devextreme-react/chart';import { dataSource } from './data.ts';​function App() {  return (    <Chart      id="chart"      palette="Soft"      title="Percent of Total Energy Production"      dataSource={dataSource}    >      <CommonSeriesSettings        argumentField="state"        type="bar"        ignoreEmptyPoints={true}      />      <Series valueField="oil" name="Oil Production" />      <Series valueField="gas" name="Gas Production" />      <Series valueField="coal" name="Coal Production" />      <Legend verticalAlignment="bottom" horizontalAlignment="center" />      <Export enabled={true} />    </Chart>  );}​export default App;​

xxxxxxxxxx
 
import React from 'react';
import {  Chart, Series, CommonSeriesSettings, Legend, Export,} from 'devextreme-react/chart';import { dataSource } from './data.js';​function App() {  return (    <Chart      id="chart"      palette="Soft"      title="Percent of Total Energy Production"      dataSource={dataSource}    >      <CommonSeriesSettings        argumentField="state"        type="bar"        ignoreEmptyPoints={true}      />      <Series        valueField="oil"        name="Oil Production"      />      <Series        valueField="gas"        name="Gas Production"      />      <Series        valueField="coal"        name="Coal Production"      />      <Legend        verticalAlignment="bottom"        horizontalAlignment="center"      />      <Export enabled={true} />    </Chart>  );}export default App;​

xxxxxxxxxx
 
import React from 'react';
import ReactDOM from 'react-dom';​import App from './App.tsx';​ReactDOM.render(  <App />,  document.getElementById('app'),);​

xxxxxxxxxx
 
export 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,}];​

xxxxxxxxxx
 
window.exports = window.exports || {};
window.config = {  transpiler: 'ts',  typescriptOptions: {    module: 'system',    emitDecoratorMetadata: true,    experimentalDecorators: true,    jsx: 'react',  },  meta: {    'react': {      'esModule': true,    },    'typescript': {      'exports': 'ts',    },    'devextreme/time_zone_utils.js': {      'esModule': true,    },    'devextreme/localization.js': {      'esModule': true,    },    'devextreme/viz/palette.js': {      'esModule': true,    },    'openai': {      'esModule': true,    },  },  paths: {    'npm:': 'https://unpkg.com/',    'bundles:': 'bundles/',    'externals:': 'bundles/externals/',  },  defaultExtension: 'js',  map: {    'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',    'typescript': 'npm:typescript@4.2.4/lib/typescript.js',    'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',    'react': 'npm:react@17.0.2/umd/react.development.js',    'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',    'prop-types': 'npm:prop-types/prop-types.js',    'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',    'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',    'es6-object-assign': 'npm:es6-object-assign',    'devextreme': 'npm:devextreme@24.2.6/cjs',    'devextreme-react': 'npm:devextreme-react@24.2.6/cjs',    'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',    'devexpress-diagram': 'npm:devexpress-diagram@2.2.15/dist/dx-diagram.js',    'devexpress-gantt': 'npm:devexpress-gantt@4.1.60/dist/dx-gantt.js',    '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',    'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',    'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',    'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',    'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',    'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',    'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',    'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',    'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',    'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',    // SystemJS plugins    'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',    'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',    // Prettier    'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',    'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',  },  packages: {    'devextreme': {      defaultExtension: 'js',    },    'devextreme-react': {      main: 'index.js',    },    'devextreme/events/utils': {      main: 'index',    },    'devextreme/common/core/events/utils': {      main: 'index',    },    'devextreme/localization/messages': {      format: 'json',      defaultExtension: 'json',    },    'devextreme/events': {      main: 'index',    },    'es6-object-assign': {      main: './index.js',      defaultExtension: 'js',    },  },  packageConfigPaths: [    'npm:@devextreme/*/package.json',    'npm:@devextreme/runtime@3.0.12/inferno/package.json',  ],  babelOptions: {    sourceMaps: false,    stage0: true,    react: true,  },};System.config(window.config);​

xxxxxxxxxx
 
import React from 'react';
import ReactDOM from 'react-dom';import App from './App.js';​ReactDOM.render(<App />, document.getElementById('app'));​

xxxxxxxxxx
 
export 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,  },];​

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">  <head>↔</head>​  <body class="dx-viewport">    <div class="demo-container">      <div id="app"></div>    </div>  </body></html>​

xxxxxxxxxx
 
#chart {
  height: 440px;}​