High Low Open Close in Blazor Chart component

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.

hilo-openclose.razor

@using Syncfusion.Blazor.Charts

<SfChart Width="60%">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
    </ChartPrimaryXAxis>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" XName="X" High="High" Low="Low" Open="Open" Close="Close" Type="ChartSeriesType.HiloOpenClose">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class Data
    {
        public string X;
        public double Y;
        public double High;
        public double Low;
        public double Open;
        public double Close;
    }

    public List<Data> StockDetails = 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 }
    };
}

Customization of HiloOpenClose Series

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.

custom-openclose.razor

@using Syncfusion.Blazor.Charts

<SfChart Width="60%">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
    </ChartPrimaryXAxis>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" XName="X" High="High" BearFillColor="#e56590" BullFillColor="#f8b883" Low="Low" Open="Open" Close="Close" Type="ChartSeriesType.HiloOpenClose">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class Data
    {
        public string X;
        public double Y;
        public double High;
        public double Low;
        public double Open;
        public double Close;
    }

    public List<Data> StockDetails = 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 }
    };
}

Customization

High Low Open Close in Blazor Chart component

Customization of HiloOpenClose Series

See Also