Your search did not match any results.
Line Charts

Line

Documentation

Line chart series types help visualize data trends over specified intervals. In this example, you can switch between the line, stacked line and full-stacked line series types. Stacked line series help visualize multiple series and compare the manner in which each series contributes to the total aggregate value for specific arguments. Full-stacked line series help compare the percentage value of multiple line series for each argument.

www.geohive.com
Copy to CodeSandBox
Apply
Reset
<template> <div id="chart-demo"> <dx-chart id="chart" :data-source="dataSource" palette="Violet" > <dx-common-series-settings :type="type" argument-field="country" /> <dx-series v-for="energy in energySources" :key="energy.value" :value-field="energy.value" :name="energy.name" /> <dx-margin :bottom="20"/> <dx-argument-axis :value-margins-enabled="false" discrete-axis-division-mode="crossLabels" > <dx-grid :visible="true"/> </dx-argument-axis> <dx-legend vertical-alignment="bottom" horizontal-alignment="center" item-text-position="bottom" /> <dx-export :enabled="true"/> <dx-title text="Energy Consumption in 2004"> <dx-subtitle text="(Millions of Tons, Oil Equivalent)"/> </dx-title> <dx-tooltip :enabled="true" :customize-tooltip="customizeTooltip" /> </dx-chart> <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Series Type</span> <dx-select-box :data-source="types" :value.sync="type" /> </div> </div> </div> </template> <script> import { DxChart, DxSeries, DxArgumentAxis, DxCommonSeriesSettings, DxExport, DxGrid, DxMargin, DxLegend, DxTitle, DxSubtitle, DxTooltip } from 'devextreme-vue/chart'; import DxSelectBox from 'devextreme-vue/select-box'; import service from './data.js'; export default { components: { DxSelectBox, DxChart, DxSeries, DxArgumentAxis, DxCommonSeriesSettings, DxExport, DxGrid, DxMargin, DxLegend, DxTitle, DxSubtitle, DxTooltip }, data() { return { dataSource: service.getCountriesInfo(), energySources: service.getEnergySources(), types: ['line', 'stackedline', 'fullstackedline'], type: 'line' }; }, methods: { customizeTooltip: (arg) => { return { text: arg.valueText }; } } }; </script> <style> .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .option { margin-top: 10px; } .caption { font-size: 18px; font-weight: 500; } .option > span { margin-right: 10px; } .option > .dx-widget { display: inline-block; vertical-align: middle; } </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/18.2.7/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.2.7/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"> <span v-if="false">Loading...</span> </div> </div> </body> </html>
const energySources = [ { value: 'hydro', name: 'Hydro-electric' }, { value: 'oil', name: 'Oil' }, { value: 'gas', name: 'Natural gas' }, { value: 'coal', name: 'Coal' }, { value: 'nuclear', name: 'Nuclear' } ]; const countriesInfo = [{ country: 'USA', hydro: 59.8, oil: 937.6, gas: 582, coal: 564.3, nuclear: 187.9 }, { country: 'China', hydro: 74.2, oil: 308.6, gas: 35.1, coal: 956.9, nuclear: 11.3 }, { country: 'Russia', hydro: 40, oil: 128.5, gas: 361.8, coal: 105, nuclear: 32.4 }, { country: 'Japan', hydro: 22.6, oil: 241.5, gas: 64.9, coal: 120.8, nuclear: 64.8 }, { country: 'India', hydro: 19, oil: 119.3, gas: 28.9, coal: 204.8, nuclear: 3.8 }, { country: 'Germany', hydro: 6.1, oil: 123.6, gas: 77.3, coal: 85.7, nuclear: 37.8 }]; export default { getEnergySources() { return energySources; }, getCountriesInfo() { return countriesInfo; } };
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.5.16/dist/vue.esm.browser.js', 'vue-loader': 'npm:systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@18.2', 'devextreme-vue': 'npm:devextreme-vue@18.2', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', '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 } });