Search results

Getting started with ASP.NET Core Stock Chart control

28 Jan 2022 / 2 minutes to read

ASP.NET Core 1.0 Application Using Visual Studio 2017

System Requirements

To work with ASP.NET Core 1.0, you need to make sure is whether you have installed the following software on your machine

  • Visual Studio 2017
  • DotNetCore 2.0

Configure Syncfusion UI Components in ASP.NET Core Application

The following steps helps to create a ASP.NET Core web application to configure our components.

  • Open Visual Studio 2017 to create ASP.NET Core web application.
  • After project creation, install the Syncfusion Packages in your application.
  • Select the Tools->Nuget Package Manager->Package Manager settings the dialog window will open.
  • Navigate to the Nuget Package Manager->Package Sources from the options dialog.
  • Click the Add button to create the new package sources.
  • Select the newly created Package Source and rename the source name using the Name input box.

Name: Name of the package that listed in Available package sources

Source: Syncfusion ASP.NET Core NuGet Package feed URL

Adding TagHelpers

  • Now open _viewImports.cshtml file from the views folder and add the following namespace for components references and Tag Helper support.
Copied to clipboard
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Syncfusion.EJ2

Adding ScriptManager

  • Add ScriptManager to the bottom of the layout.cshtml page. The ScriptManager used to place our control initialization script in the page.
Copied to clipboard
<ej-scripts> </ej-scripts>

Adding component to the Application

  • Now open your view page to render our Syncfusion components.

{% aspCodeBlock razorTemplate=“stock-chart/getting-started/datalabel/razor” %}

Copied to clipboard
        <ejs-stockchart id="container">
                <e-stockchart-series> </e-stockchart-series>

{% endaspCodeBlock %}

Populate Stock Chart With Data

This section explains how to plot below JSON data to the Stock Chart.

Add a series object to the chart by using series property and then set the JSON data to dataSource property.

Since the JSON contains DateTime data, set the valueType for horizontal axis to DateTime. By default, the axis valueType is Numeric.

Copied to clipboard
<ejs-stockchart id="stockchart" load="stockload">
                    <e-stockchart-series type='Candle' xName='x' name='Apple'> </e-stockchart-series>

        var data = chartData;
        function stockload(args) {
            args.stockChart.series[0].dataSource = data;

Copied to clipboard
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.StockChart
    public partial class StockChartController : Controller
        public IActionResult populateData()
            return View();

Alt text

You can refer to our ASP.NET Core Stock Chart feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Stock Chart example that shows you how to present and manipulate data.