DxChartCandlestickSeries<T, TArgument, TValue> Class

Defines a candlestick series.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll


public class DxChartCandlestickSeries<T, TArgument, TValue> :
    DxChartSeries<T, TArgument, TValue, ChartCandlestickSeriesModel<T, TArgument, TValue>>

Type Parameters

Name Description

The type of data.


The type of series arguments.


The type of series values.


Use a candlestick series to display the Open-High-Low-Close stock price data as candles. A set of values with the same associated argument is aggregated into one point. The first value in the set is considered to be Open Value, the last value is Close Value, maximum and minimum values represent High and Low values.

Each series point consists of a rectangle (body) whose bottom and topmost values correspond to the open and close price of a stock. A vertical line displays the high and low price for the stock. If the stock closes higher than its open price, the corresponding body is not filled. If the stock closes lower than its open price, the corresponding body is filled.

<DxChart Data="@ProductSalesData">
    <DxChartLegend Position="RelativePosition.Outside" />
    <DxChartCandlestickSeries ValueField="@((Sale i) => i.TotalCost)" 
                              ArgumentField="@(i => i.SaleDate.ToString("yyyy/MM/dd"))" 
                              Name="@($"{Product.Name} Sales")" />
        @context.GetFinancialPoint().Render((financialPoint) =>
            @<div class="p-3">
                <p>Open: @financialPoint.OpenValue</p>
                <p>Close: @financialPoint.CloseValue</p>
                <p>High: @financialPoint.HighValue</p>
                <p>Low: @financialPoint.LowValue</p>

Online Demo: Charts - Candlestick Series

To customize point appearance, use the CustomizeSeriesPoint event:

    .legend-marker {
        background-color: green !important

<DxChart Data="@ProductSalesData" CustomizeSeriesPoint="PreparePointColor">
    <DxChartCandlestickSeries ValueField="@((Sale i) => i.TotalCost)"
                              ArgumentField="@(i => i.SaleDate.ToString("yyyy/MM/dd"))"
                              Name="@($"{Product.Name} Sales")">
        <DxChartSeriesLegendItem IconCssClass="legend-marker">
            <TextTemplate>Eco Supreme Sales</TextTemplate>

@code {
    protected void PreparePointColor(ChartSeriesPointCustomizationSettings pointSettings)
        double openValue = (double)((ChartFinancialSeriesPoint)pointSettings.Point).OpenValue;
        double closeValue = (double)((ChartFinancialSeriesPoint)pointSettings.Point).CloseValue;
        if (openValue > closeValue)
            pointSettings.PointAppearance.Color = System.Drawing.Color.Red;
        else if (openValue < closeValue)
            pointSettings.PointAppearance.Color = System.Drawing.Color.Green;

The image below shows the results:


DxComplexSettingsComponent<DxChartSeries, DevExpress.Blazor.ChartSeriesModel>
DxChartSeries<T, TArgument, TValue, TValue, DevExpress.Blazor.ChartCandlestickSeriesModel<T, TArgument, TValue>>
DxChartSeries<T, TArgument, TValue, DevExpress.Blazor.ChartCandlestickSeriesModel<T, TArgument, TValue>>
DxChartCandlestickSeries<T, TArgument, TValue>
See Also