Range selector

17 Feb 20222 minutes to read

The period selector allows to select a range with specified periods. By default the period selector is enabled in stock chart.

Selecting Range

17 Feb 20222 minutes to read

The left and right thumb of RangeNavigator are used to indicate the selected range in the large collection of data. Following are the ways you can select a range.

• By dragging the thumbs.
• By tapping on the labels.
• By setting the start and end through Date Range button.

Following code example shows the enableSelector property allows users to toggle the visibility of enable selector.

CSHTML

<ejs-stockchart id="stockchart" load="stockload" title="AAPL Stock Price" enableSelector="false">
                <e-stockchart-series-collection>
                    <e-stockchart-series type='Candle' xName="x"> </e-stockchart-series>
                </e-stockchart-series-collection>
            </ejs-stockchart>
        
    <script src="~/scripts/chart/financial-data.js"></script>
    <script>
        var data = chartData;
        function stockload(args) {
            args.stockChart.series[0].dataSource = data;
        }
    </script>

Range.cs

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 Default()
        {
            return View();
        }
    }
}