Hilo in ASP.NET Core Charts Component

26 Feb 20248 minutes to read

To get started with the ASP.NET Core Hilo charts, you can check on this video:

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.

<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"
      type="@Syncfusion.EJ2.Charts.ChartSeriesType.Hilo">
    </e-series>
  </e-series-collection>
</ejs-chart>
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.
<ejs-chart id="container">
  <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
  <e-series-collection>
    <e-series dataSource="ViewBag.dataSource" xName="x" high="high" low="low" fill="blue" opacity="0.5"
      type="@Syncfusion.EJ2.Charts.ChartSeriesType.Hilo">
    </e-series>
  </e-series-collection>
</ejs-chart>
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