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.
@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 }
};
}
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.
@using Syncfusion.Blazor.Charts
<SfChart>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"/>
<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 { get; set; }
public double Y { get; set; }
public double High { get; set; }
public double Low { get; set; }
public double Open { get; set; }
public double Close { get; set; }
}
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 }
};
}