Your search did not match any results.
Bar Charts

Bi-Directional Bar Chart

Documentation

This demo shows how to create a bi-directional bar chart. This is a rotated stacked bar chart with half of its data source values converted from positive to negative.

Copy to CodeSandBox
Apply
Reset
import React from 'react'; import Chart, { CommonSeriesSettings, ValueAxis, Label, Legend, Series, Tooltip } from 'devextreme-react/chart'; import { dataSource } from './data.js'; class App extends React.Component { render() { return ( <Chart title={'Population Pyramid For Norway 2016'} dataSource={dataSource} id={'chart'} rotated={true} barGroupWidth={18} > <CommonSeriesSettings type={'stackedbar'} argumentField={'age'} /> <Series valueField={'male'} name={'Male'} color={'#3F7FBF'} /> <Series valueField={'female'} name={'Female'} color={'#F87CCC'} /> <Tooltip enabled={true} customizeTooltip={this.customizeTooltip} /> <ValueAxis> <Label customizeText={this.customizeLabel} /> </ValueAxis> <Legend verticalAlignment={'bottom'} horizontalAlignment={'center'} margin={{ left: 50 }} /> </Chart> ); } customizeTooltip(e) { return { text: Math.abs(e.valueText) }; } customizeLabel(e) { return `${Math.abs(e.value)}%`; } } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app') );
<!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/19.1.7/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.7/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/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.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
#chart { height: 549px; width: 820px; margin: 0 auto; }
export const dataSource = [{ age: '0-4', male: -3.1, female: 2.9 }, { age: '5-9', male: -3.1, female: 3.0 }, { age: '10-14', male: -3.0, female: 2.9 }, { age: '15-19', male: -3.2, female: 3.0 }, { age: '20-24', male: -3.5, female: 3.3 }, { age: '25-29', male: -3.5, female: 3.4 }, { age: '30-34', male: -3.5, female: 3.3 }, { age: '35-39', male: -3.3, female: 3.1 }, { age: '40-44', male: -3.7, female: 3.4 }, { age: '45-49', male: -3.8, female: 3.5 }, { age: '50-54', male: -3.4, female: 3.2 }, { age: '55-59', male: -3.1, female: 3.0 }, { age: '60-64', male: -2.7, female: 2.7 }, { age: '65-69', male: -2.9, female: 2.9 }, { age: '70-74', male: -2, female: 2.1 }, { age: '75-79', male: -1.2, female: 1.4 }, { age: '80-84', male: -0.8, female: 1.2 }, { age: '85-89', male: -0.5, female: 0.8 }, { age: '90-94', male: -0.2, female: 0.5 }, { age: '95+', male: 0, female: 0.1 }];
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-react': 'npm:devextreme-react@19.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });