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
$(function () {
$("#chartContainer").dxChart({
series: [{
type: "candlestick",
openValueField: "o",
closeValueField: "c",
highValueField: "h",
lowValueField: "l"
}, {
// ...
}],
commonSeriesSettings: {
candlestick: { ... },
stock: { ... }
}
});
});Angular
<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
<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
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
$(function () {
$("#chartContainer").dxChart({
series: [{
// ...
reduction: {
level: "high",
color: "blue"
}
}]
});
});Angular
<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
<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
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.