Skip to main content

DxChartCandlestickSeries<T, TArgument, TValue> Class

Defines a candlestick series.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxChartCandlestickSeries<T, TArgument, TValue> :
    DxChartFinancialSeriesBase<T, TArgument, TValue>

Type Parameters

Name Description
T

The type of data.

TArgument

The type of series arguments.

TValue

The type of series values.

Remarks

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 define High and Low values.

Each series point displays a rectangle (body) and a vertical line. The rectangle’s top and bottom edges indicate open and close prices. The vertical line displays high and low prices. If the stock closes lower than its open price, the body is filled with the color specified by the DxChartCandleStickSeries.Color or DxChartFinancialReduction.Color property. If the stock closes higher that its open price, the body is filled with the color specified by the DxChartCandleStickSeries.InnerColor property. The default body fill color for such points is white.

The DxChart component compares each point in a financial series to the previous point. You can use the DxChartFinancialReduction object to highlight points where value decreases.

Chart Candlestick Series

<DxChart Data="@StockData">
    <DxChartLegend Position="RelativePosition.Outside" />
    <DxChartCandlestickSeries ValueField="@((BargainDataPoint i) => i.Price)"
                              ArgumentField="@(i => new DateTime(i.DateTimeStamp.Year, 
                                            i.DateTimeStamp.Month, i.DateTimeStamp.Day, 
                                            i.DateTimeStamp.Hour, i.DateTimeStamp.Minute, 0) )"
                              Name="Eco Supreme" />
    <DxChartTooltip>
        @context.GetFinancialPoint().Render((financialPoint) =>
            @<div class="p-3">
                <p>Open: <span>@($"{financialPoint.OpenValue: 0.00}")</span></p>
                <p>Close: <span>@($"{financialPoint.CloseValue: 0.00}")</span></p>
                <p>High: <span>@($"{financialPoint.HighValue: 0.00}") </span></p>
                <p>Low: <span>@($"{financialPoint.LowValue: 0.00}") </span></p>
            </div>
            )
    </DxChartTooltip>
</DxChart>

Run Demo: Charts - Candlestick Series

Inheritance

Object
ComponentBase
DxSettingsComponent<DevExpress.Blazor.Internal.IXYChartSeriesModel>
DxComplexSettingsComponent<DxChartSeries, DevExpress.Blazor.Internal.IXYChartSeriesModel>
DxChartSeries
DxChartXYSeries<T, TArgument, TValue, TValue>
DxChartFinancialSeriesBase<T, TArgument, TValue>
DxChartCandlestickSeries<T, TArgument, TValue>
See Also