Your search did not match any results.
Charts

Multiple Panes

Documentation

The Chart widget 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.

www.weatherbase.com
Copy to CodeSandBox
Apply
Reset
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/19.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/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: 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 }];
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.2', 'devextreme-react': 'npm:devextreme-react@19.2', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'devexpress-gantt': 'npm:devexpress-gantt', // 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 } });