Your search did not match any results.
Charts

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.

www.wikipedia.org
Backend API
Copy to CodeSandBox
Apply
Reset
<template> <DxChart id="chart" :data-source="weatherData" default-pane="bottomPane" title="Weather in Glendale, CA" > <DxCommonSeriesSettings argument-field="month"/> <DxSeries pane="topPane" color="#b0daff" type="rangeArea" range-value1-field="minT" range-value2-field="maxT" name="Monthly Temperature Ranges, °C" /> <DxSeries pane="topPane" value-field="avgT" name="Average Temperature, °C" > <DxLabel :visible="true" :customize-text="temperatureCustomizeText" /> </DxSeries> <DxSeries type="bar" value-field="prec" name="prec, mm" > <DxLabel :visible="true" :customize-text="precipitationCustomizeText" /> </DxSeries> <DxPane name="topPane"/> <DxPane name="bottomPane"/> <DxValueAxis pane="bottomPane"> <DxGrid :visible="true"/> <DxTitle text="Precipitation, mm"/> </DxValueAxis> <DxValueAxis pane="topPane"> <DxGrid :visible="true"/> <DxTitle text="Temperature, °C"/> </DxValueAxis> <DxLegend vertical-alignment="bottom" horizontal-alignment="center" /> <DxExport :enabled="true"/> </DxChart> </template> <script> import DxChart, { DxCommonSeriesSettings, DxSeries, DxPane, DxValueAxis, DxExport, DxLegend, DxLabel, DxTitle, DxGrid } from 'devextreme-vue/chart'; import { weatherData } from './data.js'; export default { components: { DxChart, DxCommonSeriesSettings, DxSeries, DxPane, DxValueAxis, DxExport, DxLegend, DxLabel, DxTitle, DxGrid }, data() { return { weatherData }; }, methods: { temperatureCustomizeText({ valueText }) { return `${valueText} °C`; }, precipitationCustomizeText({ valueText }) { return `${valueText} mm`; } } }; </script> <style> #chart { height: 440px; } </style>
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#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/21.1.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.5/css/dx.light.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>
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 }];
window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader' }, 'devextreme/localization.js': { "esModule": true }, }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'vue': 'npm:vue@3.0.0/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.6/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@21.1.6-build-21215-0313/cjs', 'devextreme-vue': 'npm:devextreme-vue@21.1.5', 'jszip': 'npm:jszip@3.7.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.3.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.25/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@3.0.4/dist/dx-gantt.js', '@devextreme/vdom': 'npm:@devextreme/vdom@1.2.2', 'inferno': 'npm:inferno@7.4.8/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.8/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.8/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom@1.0.7/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.8/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.8/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.8/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.8/dist/inferno-extras.min.js', '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' }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' }, '@devextreme/vdom': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, packageConfigPaths: [ "npm:@devextreme/*/package.json", ], babelOptions: { sourceMaps: false, stage0: true } }; System.config(window.config);