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
<template> <dx-chart id="chart" :data-source="weatherData" default-pane="bottomPane" title="Weather in Glendale, CA" > <dx-common-series-settings argument-field="month"/> <dx-series pane="topPane" color="#b0daff" type="rangeArea" range-value1-field="minT" range-value2-field="maxT" name="Monthly Temperature Ranges, °C" /> <dx-series pane="topPane" value-field="avgT" name="Average Temperature, °C" > <dx-label :visible="true" :customize-text="temperatureCustomizeText" /> </dx-series> <dx-series type="bar" value-field="prec" name="prec, mm" > <dx-label :visible="true" :customize-text="precipitationCustomizeText" /> </dx-series> <dx-pane name="topPane"/> <dx-pane name="bottomPane"/> <dx-value-axis pane="bottomPane"> <dx-grid :visible="true"/> <dx-title text="Precipitation, mm"/> </dx-value-axis> <dx-value-axis pane="topPane"> <dx-grid :visible="true"/> <dx-title text="Temperature, °C"/> </dx-value-axis> <dx-legend vertical-alignment="bottom" horizontal-alignment="center" /> <dx-export :enabled="true"/> </dx-chart> </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 Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<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" /> <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 }];
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.2', 'devextreme-vue': 'npm:devextreme-vue@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', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });