HighLowOpenClose charts are used to describe price movements of a security, derivative, or currency over time. They are similar to candlestick charts, except opening values are displayed using lines to the left, and closing values are displayed using lines lines to the right.

To create HighLowOpenClose charts with the FlexChart control, set the bindingX property to the name of the property that contains the dates, and add a single series with binding set to a comma-delimited string containing the names of the properties that represent the High, Low, Open, and Close values.

The size of the vertical line is determined by the High and Low values; short line segments to the left and right represent the Open and Close values:

HighLowOpenCloseChartsController.cs
HighLowOpenCloseCharts.cshtml

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: HighLowOpenCloseCharts
        public ActionResult HighLowOpenCloseCharts()
        {
            return View(Models.FlexChartData.GetStocks2());
        }
    }
}

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Stock>
 
<h1>
    @Html.Raw(Resources.C1FlexChart.HighLowOpenCloseCharts_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.HighLowOpenCloseCharts_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.HighLowOpenCloseCharts_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.HighLowOpenCloseCharts_Text3)
</p>
 
@(Html.C1().FlexChart<FlexChartData.Stock>().Id("theChart")
    .Bind("Date", Model)
    .ChartType(C1.Web.Mvc.Chart.ChartType.HighLowOpenClose)
    .Series(sb => sb.Add().Binding("High,Low,Open,Close").Name("Alphabet Inc"))
    .Legend(C1.Web.Mvc.Chart.Position.None)
)