Chart

• Oct 06, 2025
• 3 minutes to read

Chart is an interactive UI component that visualizes data from local or remote storage with various series types.

Run Demo: Chart Read Tutorial

Getting Started

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:

• Configure a Visual Studio Project or Configure a non Visual Studio Project
• Add Controls to a Project
• Razor Syntax

Basic Syntax

ChartBasics.cshtml

@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)
    )
)

ChartController.cs

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);
        }
    }
}

ChartModels.cs

using System;

namespace ASP.NET_Core.Models.Chart {
    public class ChartData {
        public int Year { get; set; }
        public long Value { get; set; }
    }
}

Built-in Capabilities and Configuration Guides

• Series Types
  The Chart component includes over 20 series types, with the most popular ones being:

  • Line
  • Bar
  • Area
  • Scatter
  • Bubble
  • Financial
  • Range

  Combine them, customize appearance, and configure individual points.

• 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:

  • Legend
  • Grid
  • Title and Subtitle
  • Strips
  • Constant Lines
  • Error Bars

• Interactive Features
  Add interactivity to your Chart with the following elements:

  • Tooltips
  • Crosshair
  • Zooming and Panning
  • Client-Side Exporting and Printing
  • Adaptive Layout
  • Drill-Down

• Customization
  The following Chart customizations are available:

  • Multiple Axes
  • Multiple Panes
  • Custom Legend Markers
  • Axis Label Templates
  • Tooltip Templates
  • Color Gradients and Patterns

• Data Aggregation
  Charts with too many series points can impact performance and readability. To improve analysis, DevExtreme Chart supports point and discrete aggregation modes.

API

Server-Side API

Initialization

Call 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.

Options

For a complete option list, see Options. For details on how to specify control options, refer to the following help topic: Specify Options.

Events

For available events, see Events. For details on how to handle events, refer to the following help topic: Handle Events and Define Callbacks.

Client-Side API

Options

If 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.

Methods

For a list of available methods, see DevExtreme Chart methods. For details on how to call methods, refer to the following help topic: Call Methods.

Demos

Run Demo: Chart