Hilo in ASP.NET MVC Charts Component

17 Apr 20239 minutes to read

Hilo

Hilo Series illustrates the price movements in stock using the high and low values. To render a Hilo series, use series Type as Hilo.

Hilo series requires 3 fields (x, high and low) to show the high and low price in the stock.

<script src="chart/series/hilo/financial-data.js"></script>
@Html.EJS().Chart("container").Series(series =>
       {
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Hilo).
           XName("x").
           High("high").
           Low("low").
           DataSource("returnValue").
           Name("Apple Inc").
           Add();
       })
       .PrimaryXAxis(px => 
            px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime)
               .MajorGridLines(ViewBag.majorGridLines)
               .CrosshairTooltip(ViewBag.crosshairTooltip)
       )
       .ChartArea(area => area.Border(ViewBag.ChartBorder))
       .Crosshair(cr => cr.Enable(true).LineType(Syncfusion.EJ2.Charts.LineType.Vertical).Line(ViewBag.line))
       .LegendSettings(lg => lg.Visible(false))
       .Tooltip(tt => tt.Enable(true).Shared(true))
       .Title("AAPL Historical").Load("load").Render()

 <script>
        var dataSource = window.chartData;
        var date1 = new Date('2017-01-01');
        var returnValue = dataSource.filter(filterValue);
        function filterValue(value) {
            return value.x >= date1;
        }
    </script>
public ActionResult Index()
        {
            List<Data> chartData = new List<Data>
            {
                new Data{ x= "Jan", low= 87, high= 200 },
                new Data{ x= "Feb", low= 45, high= 135 },
                new Data{ x= "Mar", low= 19, high= 85 }, 
                new Data{ x= "Apr", low= 31, high= 108 },
                new Data{ x= "May", low= 27, high= 80 },
                new Data{ x= "June",low= 84, high= 130 },
                new Data{ x= "Jul", low= 77, high=150 }, 
                new Data{ x= "Aug", low= 54, high= 125 },
                new Data{ x= "Sep", low= 60, high= 155 },
                new Data{ x= "Oct", low= 60, high= 180 },
                new Data{ x= "Nov", low= 88, high= 180 },
                new Data{ x= "Dec", low= 84, high= 230 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class Data
        {
            public string x;
            public double y;
            public double high;
            public double low;
        }

Series customization

The following properties can be used to customize the Hilo series.

  • Fill – Specifies the color of the series.
  • Opacity – Specifies the opacity of Fill.
@Html.EJS().Chart("container").Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Hilo).  
      XName("x").
      High("high").
      Low("low").
      DataSource(ViewBag.dataSource).
      Opacity(0.5).
      Fill("blue").
      Add();
   })
   .PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category))
   .Render()
public ActionResult Index()
        {
            List<Data> chartData = new List<Data>
            {
                new Data{ x= "Jan", low= 87, high= 200 },
                new Data{ x= "Feb", low= 45, high= 135 },
                new Data{ x= "Mar", low= 19, high= 85 }, 
                new Data{ x= "Apr", low= 31, high= 108 },
                new Data{ x= "May", low= 27, high= 80 },
                new Data{ x= "June",low= 84, high= 130 },
                new Data{ x= "Jul", low= 77, high=150 }, 
                new Data{ x= "Aug", low= 54, high= 125 },
                new Data{ x= "Sep", low= 60, high= 155 },
                new Data{ x= "Oct", low= 60, high= 180 },
                new Data{ x= "Nov", low= 88, high= 180 },
                new Data{ x= "Dec", low= 84, high= 230 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class Data
        {
            public string x;
            public double high;
            public double low;
        }

See Also