High Low Open Close in ASP.NET CORE Charts Component

17 Apr 20236 minutes to read

High Low Open Close

HiloOpenClose series is used to represent the low, high, open and closing values over time. To render a HiloOpenClose series, use series Type as HiloOpenClose.

HiloOpenClose series requires 5 fields (x, high, low, open and close) to show the high, low, open and close price values in the stock.

<ejs-chart id="container" width="60%">
    <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" high="high" low="low" open="open" close="close"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.HiloOpenClose">
        </e-series>
    </e-series-collection>
</ejs-chart>
public ActionResult Index()
        {
            List<Data> chartData = new List<Data>
            {
                new Data{ x= "Jan", open= 120, high= 160, low= 100, close= 140 },
                new Data{ x= "Feb", open= 150, high= 190, low= 130, close= 170 },
                new Data{ x= "Mar", open= 130, high= 170, low= 110, close= 150 },
                new Data{ x= "Apr", open= 160, high= 180, low= 120, close= 140 },
                new Data{ x= "May", open= 150, high= 170, low= 110, close= 130 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class Data
        {
            public string x;
            public double y;
            public double high;
            public double low;
            public double open;
            public double close;
        }

Series customization

In HiloOpenClose series, BullFillColor is used to fill the segment when the open value is greater than the close value and BearFillColor is used to fill the segment when the open value is less than the close value.

By default, bullFillColor is set as red and bearFillColor is set as green.

<ejs-chart id="container" width="60%">
    <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" high="high" low="low" open="open" close="close"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.HiloOpenClose" bearFillColor="#e56590" bullFillColor="#f8b883">
        </e-series>
    </e-series-collection>
</ejs-chart>
public ActionResult Index()
        {
            List<Data> chartData = new List<Data>
            {
                new Data{ x= "Jan", open= 120, high= 160, low= 100, close= 140 },
                new Data{ x= "Feb", open= 150, high= 190, low= 130, close= 170 },
                new Data{ x= "Mar", open= 130, high= 170, low= 110, close= 150 },
                new Data{ x= "Apr", open= 160, high= 180, low= 120, close= 140 },
                new Data{ x= "May", open= 150, high= 170, low= 110, close= 130 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class Data
        {
            public string x;
            public double y;
            public double high;
            public double low;
            public double open;
            public double close;
        }

See Also