aspnetcore-400762-devextreme-based-controls-controls-chart.md
Chart is an interactive UI component that visualizes data from local or remote storage with various series types.
The Chart UI Control is based on the DevExtreme Chart component.
To add this control to your project, follow instructions in the following help topics:
@using ASP.NET_Core.Models.Chart
@model List<ChartData>
@(Html.DevExtreme().Chart()
.DataSource(Model)
.Series(s => s
.Add()
.Type(SeriesType.Bar)
.ArgumentField("Year")
.ValueField("Value")
)
.ArgumentAxis(aa => aa
.TickInterval(10)
.ArgumentType(ChartDataType.String)
)
)
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using ASP.NET_Core.Models.Chart;
namespace ASP_NET_Core.Controllers {
public class ChartController : Controller {
public IActionResult GettingStarted() {
var model = new List<ChartData>() {
new ChartData {
Year = 1960,
Value = 3032019978,
},
new ChartData {
Year = 1970,
Value = 3683676306,
},
new ChartData {
Year = 1980,
Value = 4434021975,
},
new ChartData {
Year = 1990,
Value = 5281340078,
},
new ChartData {
Year = 2000,
Value = 6115108363,
},
new ChartData {
Year = 2010,
Value = 6922947261,
},
new ChartData {
Year = 2020,
Value = 7795000000,
}
};
return View(model);
}
}
}
using System;
namespace ASP.NET_Core.Models.Chart {
public class ChartData {
public int Year { get; set; }
public long Value { get; set; }
}
}
Series Types
The Chart component includes over 20 series types, with the most popular ones being:
Data Sources
Chart can load and update data from various data source types. Bind data directly or use a series template.
Informational Elements
You can enhance the Chart with additional information elements, such as:
Interactive Features
Add interactivity to your Chart with the following elements:
Customization
The following Chart customizations are available:
Data Aggregation
Charts with too many series points can impact performance and readability. To improve analysis, DevExtreme Chart supports point and discrete aggregation modes.
InitializationCall the Chart() method to create a Chart control. This action initializes a ChartBuilder instance. Use the instance methods to specify Chart options and event handlers.OptionsFor a complete option list, see Options. For details on how to specify control options, refer to the following help topic: Specify Options.EventsFor available events, see Events. For details on how to handle events, refer to the following help topic: Handle Events and Define Callbacks.
OptionsIf you need to specify the Chart options dynamically on the client side, use client-side API. For a complete option list, see DevExtreme Chart options.MethodsFor a list of available methods, see DevExtreme Chart methods. For details on how to call methods, refer to the following help topic: Call Methods.
See Also