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.

www.datahub.io

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

@(Html.DevExtreme().Chart() .ID("chart") .DataSource(new JS("populationData")) .Series(s => s .Add() .Type(SeriesType.Bar) ) .Legend(l => l.Visible(false)) .ArgumentAxis(a => a .TickInterval(10) .Label(l => l .Format(f => f .Type(Format.Decimal) ) ) ) .Title("World Population by Decade") ) <script src="~/Scripts/data/populationData.js"></script>

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using System; using System.Collections.Generic; using System.Linq; using System.Text.Json; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ChartsController : Controller { public ActionResult SimpleArray() { return View(); } } }

var 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 }];

#chart { height: 440px; }

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.