All docs
V21.1
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

jQuery Chart - 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 property 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.

jQuery
JavaScript
$(function () {
    $("#chartContainer").dxChart({
        series: [{
            type: "candlestick",
            openValueField: "o",
            closeValueField: "c",
            highValueField: "h",
            lowValueField: "l"
        }, {
            // ...
        }],
        commonSeriesSettings: {
            candlestick: { ... },
            stock: { ... }
        }
    });
});
Angular
HTML
TypeScript
<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
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart ... >
        <DxSeries
            type="candlestick"
            open-value-field="o"
            close-value-field="c"
            high-value-field="h"
            low-value-field="l"
        />
        <DxSeries ... />
        ...
        <DxCommonSeriesSettings
            :candlestick="candleStickSettings"
            :stock="stockSettings"
        />
    </DxChart>
</template>

<script>
import DxChart, {
    DxSeries,
    DxCommonSeriesSettings
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxSeries,
        DxCommonSeriesSettings
    },
    data() {
        return {
            candleStickSettings: { ... },
            stockSettings: { ... }
        };
    }
}
</script>
React
App.js
import React from 'react';
import Chart, {
    Series,
    CommonSeriesSettings
} from 'devextreme-react/chart';

const candleStickSettings = { ... };
const stockSettings = { ... };

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <Series
                    type="candlestick"
                    openValueField="o"
                    closeValueField="c"
                    highValueField="h"
                    lowValueField="l"
                />
                <Series ... />
                ...
                <CommonSeriesSettings
                    candlestick={candleStickSettings}
                    stock={stockSettings}
                />
            </Chart>
        );
    }
}

export default App;

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

jQuery
JavaScript
$(function () {
    $("#chartContainer").dxChart({
        series: [{
            // ...
            reduction: {
                level: "high",
                color: "blue"
            }
        }]
    });
});
Angular
HTML
TypeScript
<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
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart ... >
        <DxSeries ... >
            <DxReduction
                level="high"
                color="blue"
            />
        </DxSeries>
    </DxChart>
</template>

<script>
import DxChart, {
    DxSeries,
    DxReduction
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxSeries,
        DxReduction
    }
}
</script>
React
App.js
import React from 'react';
import Chart, {
    Series,
    Reduction
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <Series ... >
                    <Reduction
                        level="high"
                        color="blue"
                    />
                </Series>
            </Chart>
        );
    }
}

export default App;

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

Financial Series Demo

See Also