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
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!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
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;
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;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
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,
}];
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,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.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@15.8.1/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@23.2.5/cjs',
'devextreme-react': 'npm:devextreme-react@23.2.5/cjs',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.6.4/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.51/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@7.4.11/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.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: '',
},
'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);
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
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,
},
];
<!DOCTYPE html>
<html>
<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" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import("./index.tsx");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
#chart {
height: 440px;
}