DevExtreme jQuery - Financial Series

Candlestick and Stock are financial series types used to describe and analyse trading patterns over short periods of time. Each point in a Candlestick series is composed of a real body and two wicks. The real body illustrates the opening and closing trades; it is filled if the closing price is lower than the opening price, and empty otherwise. The wicks visualize the highest and lowest traded prices during the day. A Stock series is similar to Candlestick except that the opening and closing trades are illustrated by markers instead of the real body.

Assign "candlestick" or "stock" to the series[].type option to specify the corresponding series type. You can configure:

• Each series individually using the series array;
• All series in the Chart using the commonSeriesSettings object;
• All Candlestick or Stock series using the commonSeriesSettings.candlestick or commonSeriesSettings.stock object respectively.

Note that the financial series require four value fields: openValueField, closeValueField, highValueField, and lowValueField.

$(function () {
    $("#chartContainer").dxChart({
        series: [{
            type: "candlestick",
            openValueField: "o",
            closeValueField: "c",
            highValueField: "h",
            lowValueField: "l"
        }, {
            // ...
        }],
        commonSeriesSettings: {
            candlestick: { ... },
            stock: { ... }
        }
    });
});

<dx-chart ... >
    <dxi-series
        type="candlestick"
        openValueField="o"
        closeValueField="c"
        highValueField="h"
        lowValueField="l">
    </dxi-series>
    <dxi-series ... ></dxi-series>
    ...
    <dxo-common-series-settings>
        <dxo-candlestick ... ></dxo-candlestick>
        <dxo-stock ... ></dxo-stock>
    </dxo-common-series-settings>
</dx-chart>

import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

Financial series gauge price reduction by comparing the values of two neighboring points. Use the reduction.level option to specify whether it should be the open, close, high, or low values. The reduction.color colors points whose value decreases.

$(function () {
    $("#chartContainer").dxChart({
        series: [{
            // ...
            reduction: {
                level: "high",
                color: "blue"
            }
        }]
    });
});

<dx-chart ... >
    <dxi-series ... >
        <dxo-reduction level="high" color="blue"></dxo-reduction>
    </dxi-series>
</dx-chart>

import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

See the CandleStickSeries and StockSeries API Reference sections for a full list of options available to a financial series.

Financial Series Demos

See Also

• Series
• Bind Series to Data