DxChartCandlestickSeries<T, TArgument, TValue> Class

Defines a candlestick series.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

public class DxChartCandlestickSeries<T, TArgument, TValue> :
    DxChartSeries<T, TArgument, TValue, ChartCandlestickSeriesModel<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 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")" />
    <DxChartTooltip>
        @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>
            </div>
        )
    </DxChartTooltip>
</DxChart>
NOTE

Online Demo: Charts - Candlestick Series

To customize point appearance, use the CustomizeSeriesPoint event:

<style>
    .legend-marker {
        background-color: green !important
    }
</style>

<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>
        </DxChartSeriesLegendItem>
    </DxChartCandlestickSeries>
</DxChart>

@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:

Inheritance

Object
ComponentBase
DxSettingsComponent<DevExpress.Blazor.ChartSeriesModel>
DxComplexSettingsComponent<DxChartSeries, DevExpress.Blazor.ChartSeriesModel>
DxChartSeries
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