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> <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 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/20.1.6/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.6/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', meta: { '*.vue': { loader: 'vue-loader' }, }, 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@20.1', 'devextreme-vue': 'npm:devextreme-vue@20.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram@1.0.9', 'devexpress-gantt': 'npm:devexpress-gantt@1.0.7', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, }, babelOptions: { sourceMaps: false, stage0: true } });