Multiple Axes
You can display the Chart component with multiple axes for better data visualization. This demo illustrates a chart with two separate axes that display percentage and absolute values.
To configure a multi-axis chart, follow the steps below:
-
Create and name value axes. Declare multiple objects in the valueAxis array. Each object configures a value axis. Every value axis should have a unique name.
-
Bind series to value axes.
Assign the name of an axis to the series.axis property. If leave the series.axis property unspecified, the series is bound to the axis declared first in the valueAxis array.
In this demo, the first axis is declared without a name and is bound to the first series. The name of the second axis is total and it is bound to the spline series. The position of the second axis is right.
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.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
import React from 'react';
import Chart, {
CommonSeriesSettings,
Series,
ValueAxis,
Export,
Legend,
Tooltip,
Title,
Grid,
Format,
} from 'devextreme-react/chart';
import { continentSources, populationData } from './data.js';
class App extends React.Component {
render() {
return (
<Chart
id="chart"
palette="Vintage"
dataSource={populationData}
>
<CommonSeriesSettings
argumentField="year"
type="fullstackedbar"
/>
{
continentSources.map((item) => <Series
key={item.value}
valueField={item.value}
name={item.name} />)
}
<Series
axis="total"
type="spline"
valueField="total"
name="Total"
color="#008fd8"
/>
<ValueAxis>
<Grid visible={true} />
</ValueAxis>
<ValueAxis
name="total"
position="right"
title="Total Population, billions"
>
<Grid visible={true} />
</ValueAxis>
<Legend
verticalAlignment="bottom"
horizontalAlignment="center"
/>
<Export enabled={true} />
<Tooltip
enabled={true}
shared={true}
customizeTooltip={customizeTooltip}
>
<Format
type="largeNumber"
precision={1}
/>
</Tooltip>
<Title text="Evolution of Population by Continent" />
</Chart>
);
}
}
function customizeTooltip(pointInfo) {
const items = pointInfo.valueText.split('\n');
const color = pointInfo.point.getColor();
items.forEach((item, index) => {
if (item.indexOf(pointInfo.seriesName) === 0) {
const element = document.createElement('span');
element.textContent = item;
element.style.color = color;
element.className = 'active';
items[index] = element.outerHTML;
}
});
return { text: items.join('\n') };
}
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/22.2.3/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.js");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
#chart {
height: 440px;
}
.active {
font-weight: 500;
}
export const continentSources = [
{ value: 'africa', name: 'Africa' },
{ value: 'asia', name: 'Asia' },
{ value: 'europe', name: 'Europe' },
{ value: 'latinamerica', name: 'Latin America & Caribbean' },
{ value: 'northamerica', name: 'Northern America' },
{ value: 'oceania', name: 'Oceania' },
];
export const populationData = [{
year: '1750',
africa: 106000000,
asia: 502000000,
europe: 163000000,
latinamerica: 16000000,
northamerica: 2000000,
oceania: 2000000,
total: 791000000,
}, {
year: '1800',
africa: 107000000,
asia: 635000000,
europe: 203000000,
latinamerica: 24000000,
northamerica: 7000000,
oceania: 2000000,
total: 978000000,
}, {
year: '1850',
africa: 111000000,
asia: 809000000,
europe: 276000000,
latinamerica: 38000000,
northamerica: 26000000,
oceania: 2000000,
total: 1262000000,
}, {
year: '1900',
africa: 133000000,
asia: 947000000,
europe: 408000000,
latinamerica: 74000000,
northamerica: 82000000,
oceania: 6000000,
total: 1650000000,
}, {
year: '1950',
africa: 229895000,
asia: 1403388000,
europe: 547287000,
latinamerica: 167368000,
northamerica: 171614000,
oceania: 12675000,
total: 2532227000,
}, {
year: '2000',
africa: 811101000,
asia: 3719044000,
europe: 726777000,
latinamerica: 521419000,
northamerica: 313289000,
oceania: 31130000,
total: 6122770000,
}, {
year: '2050',
africa: 2191599000,
asia: 5142220000,
europe: 719257000,
latinamerica: 750956000,
northamerica: 446862000,
oceania: 55223000,
total: 9306128000,
}];
window.config = {
transpiler: 'plugin-babel',
meta: {
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
defaultExtension: 'js',
map: {
'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.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@22.2.3/cjs',
'devextreme-react': 'npm:devextreme-react@22.2.3',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.5.18/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.1.65/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.37/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat@7.4.11/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@7.4.11/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras@7.4.11/dist/inferno-extras.min.js',
// 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.7.1/standalone.js',
'prettier/parser-html': 'npm:prettier@2.7.1/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.11/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);