Your search did not match any results.



If your server stores data in JSON format, making AJAX requests is inevitable. But instead of configuring these requests manually, assign the URL of your data storage (in this demo, a JSON file) to the dataSource option, and the Chart will do the rest.

Copy to CodeSandBox
<template> <DxChart id="chart" :rotated="true" data-source="../../../../data/simpleJSON.json" title="Daily Sales" > <DxArgumentAxis> <DxLabel :customize-text="customizeLabelText"/> </DxArgumentAxis> <DxValueAxis> <DxTick :visible="false"/> <DxLabel :visible="false"/> </DxValueAxis> <DxSeries argument-field="day" value-field="sales" type="bar" color="#79cac4" > <DxLabel :visible="true" background-color="#c18e92" /> </DxSeries> <DxLegend :visible="false"/> <DxExport :enabled="true"/> </DxChart> </template> <script> import DxChart, { DxArgumentAxis, DxExport, DxSeries, DxValueAxis, DxLabel, DxLegend, DxTick } from 'devextreme-vue/chart'; export default { components: { DxChart, DxArgumentAxis, DxExport, DxSeries, DxValueAxis, DxLabel, DxLegend, DxTick }, methods: { customizeLabelText({ valueText }) { return `Day ${valueText}`; } } }; </script> <style> #chart { height: 440px; } </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="" /> <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>
System.config({ transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader' }, }, paths: { 'npm:': '' }, 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.17', 'devexpress-gantt': 'npm:devexpress-gantt@1.0.10', '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 } });