Your search did not match any results.
Charts

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.

www.datahub.io
Backend API
Copy to CodePen
Apply
Reset
window.onload = function () { const viewModel = { chartOptions: { dataSource: populationData, legend: { visible: false, }, series: { type: 'bar', }, argumentAxis: { tickInterval: 10, label: { format: { type: 'decimal', }, }, }, title: 'World Population by Decade', }, }; ko.applyBindings(viewModel, document.getElementById('chart-demo')); };
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.3/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/22.1.3/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="chart-demo"> <div id="chart" data-bind="dxChart: chartOptions"></div> </div> </div> </body> </html>
#chart { height: 440px; }
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, }];