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> <DxChart id="chart" :data-source="populationData" palette="Vintage" > <DxCommonSeriesSettings argument-field="year" type="fullstackedbar" /> <DxSeries v-for="continent in continentSources" :key="continent.value" :value-field="continent.value" :name="continent.name" /> <DxSeries axis="total" type="spline" value-field="total" name="Total" color="#008fd8" /> <DxValueAxis> <DxGrid :visible="true"/> </DxValueAxis> <DxValueAxis name="total" position="right" title="Total Population, billions" > <DxGrid :visible="true"/> </DxValueAxis> <DxLegend vertical-alignment="bottom" horizontal-alignment="center" /> <DxExport :enabled="true"/> <DxTooltip :enabled="true" :shared="true" :customize-tooltip="customizeTooltip" > <DxFormat :precision="1" type="largeNumber" /> </DxTooltip> <DxTitle text="Evolution of Population by Continent"/> </DxChart> </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/20.1.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.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', 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.5', 'devexpress-gantt': 'npm:devexpress-gantt@1.0.3', '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 } });