DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.


Line charts help visualize data and display them as lines with points placed over specified intervals. This demo shows how to initialize and configure Line, Stacked Line, and Full-Stacked Line charts. A Stacked Line chart visualizes multiple data series and allows you to compare the manner in which each series contributes to the total aggregate value for specific arguments. A Full-Stacked Line chart helps compare the percentage value of multiple line series for each argument. Use the drop-down menu under the chart to switch between chart types.

Backend API
<template> <div id="chart-demo"> <DxChart id="chart" :data-source="dataSource" palette="Violet" > <DxCommonSeriesSettings :type="type" argument-field="country" /> <DxSeries v-for="energy in energySources" :key="energy.value" :value-field="energy.value" :name="" /> <DxMargin :bottom="20"/> <DxArgumentAxis :value-margins-enabled="false" discrete-axis-division-mode="crossLabels" > <DxGrid :visible="true"/> </DxArgumentAxis> <DxLegend vertical-alignment="bottom" horizontal-alignment="center" item-text-position="bottom" /> <DxExport :enabled="true"/> <DxTitle text="Energy Consumption in 2004"> <DxSubtitle text="(Millions of Tons, Oil Equivalent)"/> </DxTitle> <DxTooltip :enabled="true"/> </DxChart> <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Series Type</span> <DxSelectBox :data-source="types" :input-attr="{ 'aria-label': 'Series Type' }" v-model:value="type" /> </div> </div> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; 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.ts'; const dataSource = service.getCountriesInfo(); const energySources = service.getEnergySources(); const types = ['line', 'stackedline', 'fullstackedline']; const type = ref('line'); </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: 14px; } .option > .dx-widget { display: inline-block; vertical-align: middle; } </style>
window.exports = window.exports || {}; window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader', }, '*.ts': { loader: 'demo-ts-loader', }, '*.svg': { loader: 'svg-loader', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'root:': '../../../../', 'npm:': '', }, map: { 'vue': 'npm:vue@3.2.47/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.1/index.js', 'demo-ts-loader': 'root:utils/demo-ts-loader.js', 'svg-loader': 'root:utils/svg-loader.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@24.1.3/cjs', 'devextreme-vue': 'npm:devextreme-vue@24.1.3/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.8/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme-vue': { main: 'index.js', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.13/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, }, }; System.config(window.config);
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: 71.2, oil: 910.4, gas: 483.2, coal: 564.3, nuclear: 216.1, }, { country: 'China', hydro: 72.5, oil: 223.6, gas: 36, coal: 956.9, nuclear: 11.3, }, { country: 'Russia', hydro: 47.7, oil: 149.4, gas: 432.3, coal: 105, nuclear: 29.3, }, { country: 'Japan', hydro: 17.9, oil: 283.6, gas: 61.8, coal: 120.8, nuclear: 52.8, }, { country: 'India', hydro: 14.4, oil: 86.4, gas: 25.1, coal: 204.8, nuclear: 3.8, }, { country: 'Germany', hydro: 6.6, oil: 101.7, gas: 92.7, coal: 85.7, nuclear: 30.8, }]; export default { getEnergySources() { return energySources; }, getCountriesInfo() { return countriesInfo; }, };
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="" /> <script src=""></script> <script type="module"> import * as vueCompilerSFC from ""; window.vueCompilerSFC = vueCompilerSFC; </script> <script src=""></script> <script src=""></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>

Bind to Data

You can bind line charts to one of the following data sources:

In this demo, the chart is populated with data from a local JavaScript array.

Configure Series

The series type defines the appearance of your chart. To display a Line, Stacked Line, or Full-Stacked Line series, set the type property to one of these types.

You also need to bind the series to data. Set the argumentField and valueField properties to data fields that contain arguments and values for your series. You can specify these properties in an object in the series array or include them in the commonSeriesSettings object. In this demo, the argumentField and type properties are specified for all series in the commonSeriesSettings object.

Enable Tooltips

When you hover the mouse pointer over a series point, it shows a tooltip with information about the series point. To display tooltips, you need to enable the tooltip.enabled property.

Export Chart to Image

To allow a user to print the chart or export it as a PNG, JPEG, or SVG file, set the export.enabled property to true. This setting adds a button that opens a drop-down menu with export and print commands. In this demo, you can find this button in the upper-right corner.