Your search did not match any results.

Simple Array

If you do not need to populate the Chart with data from a remote server, and the data does not change frequently, then bind the component to a local JavaScript array. Pass the array to the Chart's dataSource property.

Once you assign the data source, specify the series type and its nested options: argumentField and valueField. If you specify these properties, the component can determine the object fields that indicate Chart arguments and values in the array. The default values for these properties are arg and val, respectively. You can use these data field names to structure your array as shown in this demo.
Backend API
Copy to CodeSandBox
<template> <DxChart id="chart" :data-source="populationData" title="World Population by Decade" > <DxArgumentAxis :tick-interval="10"> <DxLabel format="decimal"/> </DxArgumentAxis> <DxSeries type="bar"/> <DxLegend :visible="false"/> </DxChart> </template> <script> import DxChart, { DxArgumentAxis, DxLegend, DxLabel, DxSeries, } from 'devextreme-vue/chart'; import { populationData } from './data.js'; export default { components: { DxChart, DxArgumentAxis, DxLabel, DxLegend, DxSeries, }, data() { return { populationData, }; }, }; </script> <style> #chart { height: 440px; } </style>
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#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="" /> <link rel="stylesheet" type="text/css" href="" /> <script src=""></script> <script src=""></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 populationData = [{ arg: 1960, val: 3032019978, }, { arg: 1970, val: 3683676306, }, { arg: 1980, val: 4434021975, }, { arg: 1990, val: 5281340078, }, { arg: 2000, val: 6115108363, }, { arg: 2010, val: 6922947261, }, { arg: 2020, val: 7795000000, }];
window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader', }, 'devextreme/localization.js': { 'esModule': true, }, }, paths: { 'npm:': '', }, map: { 'vue': 'npm:vue@3.0.0/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@22.1.3/cjs', 'devextreme-vue': 'npm:devextreme-vue@22.1.3', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.5.16/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.57/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.30/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.7', 'inferno': 'npm:inferno@7.4.4/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.11/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@7.4.11/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.11/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', }, 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.7/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, }, }; System.config(window.config);