Your search did not match any results.
Charts

Multiple Axes

Documentation

With the Chart widget, you can display charts with multiple axes and combine charts together to help better visualize the similarities or differences in data under investigation.

www.geohive.com
Copy to CodeSandBox
Apply
Reset
<template> <dx-chart id="chart" :data-source="populationData" palette="Vintage" > <dx-common-series-settings argument-field="year" type="fullstackedbar" /> <dx-series v-for="continent in continentSources" :key="continent.value" :value-field="continent.value" :name="continent.name" /> <dx-series axis="total" type="spline" value-field="total" name="Total" color="#008fd8" /> <dx-value-axis> <dx-grid :visible="true"/> </dx-value-axis> <dx-value-axis name="total" position="right" title="Total Population, billions" > <dx-grid :visible="true"/> </dx-value-axis> <dx-legend vertical-alignment="bottom" horizontal-alignment="center" /> <dx-export :enabled="true"/> <dx-tooltip :enabled="true" :shared="true" :customize-tooltip="customizeTooltip" > <dx-format :precision="1" type="largeNumber" /> </dx-tooltip> <dx-title text="Evolution of Population by Continent"/> </dx-chart> </template> <script> import DxChart, { DxCommonSeriesSettings, DxSeries, DxValueAxis, DxExport, DxLegend, DxTooltip, DxTitle, DxGrid, DxFormat } from 'devextreme-vue/chart'; import { continentSources, populationData } from './data.js'; export default { components: { DxChart, DxCommonSeriesSettings, DxSeries, DxValueAxis, DxExport, DxLegend, DxTooltip, DxTitle, DxGrid, DxFormat }, data() { return { continentSources, populationData }; }, methods: { customizeTooltip(pointInfo) { const items = pointInfo.valueText.split('\n'); const color = pointInfo.point.getColor(); items.forEach((item, index) => { if(item.indexOf(pointInfo.seriesName) === 0) { const element = document.createElement('span'); element.textContent = item; element.style.color = color; element.className = 'active'; items[index] = element.outerHTML; } }); return { text: items.join('\n') }; } } }; </script> <style> #chart { height: 440px; } .active { font-weight: 500; } </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 continentSources = [ { value: 'africa', name: 'Africa' }, { value: 'asia', name: 'Asia' }, { value: 'europe', name: 'Europe' }, { value: 'latinamerica', name: 'Latin America & Caribbean' }, { value: 'northamerica', name: 'Northern America' }, { value: 'oceania', name: 'Oceania' } ]; export const populationData = [{ year: '1750', africa: 106000000, asia: 502000000, europe: 163000000, latinamerica: 16000000, northamerica: 2000000, oceania: 2000000, total: 791000000 }, { year: '1800', africa: 107000000, asia: 635000000, europe: 203000000, latinamerica: 24000000, northamerica: 7000000, oceania: 2000000, total: 978000000 }, { year: '1850', africa: 111000000, asia: 809000000, europe: 276000000, latinamerica: 38000000, northamerica: 26000000, oceania: 2000000, total: 1262000000 }, { year: '1900', africa: 133000000, asia: 947000000, europe: 408000000, latinamerica: 74000000, northamerica: 82000000, oceania: 6000000, total: 1650000000 }, { year: '1950', africa: 229895000, asia: 1403388000, europe: 547287000, latinamerica: 167368000, northamerica: 171614000, oceania: 12675000, total: 2532227000 }, { year: '2000', africa: 811101000, asia: 3719044000, europe: 726777000, latinamerica: 521419000, northamerica: 313289000, oceania: 31130000, total: 6122770000 }, { year: '2050', africa: 2191599000, asia: 5142220000, europe: 719257000, latinamerica: 750956000, northamerica: 446862000, oceania: 55223000, total: 9306128000 }];
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 } });