Multiple Panes

Documentation

The Chart component allows you to create charts with multiple panes stacked vertically. Each pane can plot one or more series and can share the argument axis with other plots.

Prev Demo

Next Demo

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!

Backend API

import React from 'react'; import Chart, { CommonSeriesSettings, Series, Pane, ValueAxis, Export, Legend, Label, Title, Grid, } from 'devextreme-react/chart'; import { weatherData } from './data.js'; class App extends React.Component { render() { return ( <Chart id="chart" dataSource={weatherData} defaultPane="bottomPane" title="Weather in Glendale, CA" > <CommonSeriesSettings argumentField="month" /> <Series pane="topPane" color="#b0daff" type="rangeArea" rangeValue1Field="minT" rangeValue2Field="maxT" name="Monthly Temperature Ranges, °C" /> <Series pane="topPane" valueField="avgT" name="Average Temperature, °C" > <Label visible={true} customizeText={temperatureCustomizeText} /> </Series> <Series type="bar" valueField="prec" name="prec, mm" > <Label visible={true} customizeText={precipitationCustomizeText} /> </Series> <Pane name="topPane" /> <Pane name="bottomPane" /> <ValueAxis pane="bottomPane"> <Grid visible={true} /> <Title text="Precipitation, mm" /> </ValueAxis> <ValueAxis pane="topPane"> <Grid visible={true} /> <Title text="Temperature, °C" /> </ValueAxis> <Legend verticalAlignment="bottom" horizontalAlignment="center" /> <Export enabled={true} /> </Chart> ); } } function temperatureCustomizeText({ valueText }) { return `${valueText} °C`; } function precipitationCustomizeText({ valueText }) { return `${valueText} mm`; } 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/23.1.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.js"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

#chart { height: 440px; }

export const weatherData = [{ month: 'January', avgT: 9.8, minT: 4.1, maxT: 15.5, prec: 109, }, { month: 'February', avgT: 11.8, minT: 5.8, maxT: 17.8, prec: 104, }, { month: 'March', avgT: 13.4, minT: 7.2, maxT: 19.6, prec: 92, }, { month: 'April', avgT: 15.4, minT: 8.1, maxT: 22.8, prec: 30, }, { month: 'May', avgT: 18, minT: 10.3, maxT: 25.7, prec: 10, }, { month: 'June', avgT: 20.6, minT: 12.2, maxT: 29, prec: 2, }, { month: 'July', avgT: 22.2, minT: 13.2, maxT: 31.3, prec: 2, }, { month: 'August', avgT: 22.2, minT: 13.2, maxT: 31.1, prec: 1, }, { month: 'September', avgT: 21.2, minT: 12.4, maxT: 29.9, prec: 8, }, { month: 'October', avgT: 17.9, minT: 9.7, maxT: 26.1, prec: 24, }, { month: 'November', avgT: 12.9, minT: 6.2, maxT: 19.6, prec: 64, }, { month: 'December', avgT: 9.6, minT: 3.4, maxT: 15.7, prec: 76, }];