Skip to main content

Risk Reward

This page describes how to integrate the Risk Reward drawing with trading in DXcharts React — specifically the Create Order action on the Entry line.

For the drawing itself (long and short examples, properties, fixed ratio behavior), see the Risk Reward drawing article in DXcharts Lite.

Create Order​

When trading prerequisites are met, a selected long or short Risk Reward drawing shows Create Order on the entry line while you hover it (the action is hidden while dragging handles). The drawing must have valid Entry, Take Profit, and Stop Loss prices, a positive pointValue, and a quantity within trading.minOrderQuantity and trading.maxOrderQuantity derived from its trade settings.

The demo uses mock trading providers with trading and active orders enabled. The docs order provider keeps orders in memory and pushes them through observeOrders, so limit lines appear on the chart after you create an order.

The trading demo lets you place orders and see how they behave on the chart without live execution — it is useful for getting comfortable with the workflow before you risk real capital.

Use the demo below to try Create Order with the Risk Reward tool. After candle data loads, a Risk Reward figure is placed and selected automatically. Hover over the Entry line and click Create Order.

Prerequisites​

Create Order appears only when all of the following are true:

  • trading.enabled and trading.addNewOrderEnabled are set in ChartReactConfig
  • drawings.riskReward.createOrderEnabled is not disabled (default is true in ChartReactConfig)
  • trading.orderTypes.limit is not disabled
  • Chart trading settings have visible and showOrders enabled (for example via initialChartReactSettings.trading; both default to false)
  • The chart instrument is tradable (tradingAllowed is derived from instrument data)
  • Drawings are not globally disabled on the chart
  • An OrderProvider is implemented and supplies orders to the chart

When you click Create Order, the chart always submits a limit order at the entry price. Take Profit and Stop Loss protection orders are created only when trading.takeProfitStopLossEnabled is set in ChartReactConfig.

For general trading setup (orders, positions, protection orders), see Trading.

Configuration​

Risk Reward drawing options in ChartReactConfig#drawings:

export interface PartialRiskRewardDrawingsConfig {
    createOrderEnabled?: boolean;
}

A minimal config that enables Create Order together with trading. Merge it into dependencies.chartReactConfig on ChartReactApp (see Config override):

export const createOrderMinimalConfig = {
	trading: {
		enabled: true,
		addNewOrderEnabled: true,
		orderTypes: {
			limit: true,
		},
	},
	drawings: {
		riskReward: { createOrderEnabled: true },
	},
};

// <ChartReactApp dependencies={{ chartReactConfig: createOrderMinimalConfig }} />

To also place take-profit and stop-loss protection orders from the drawing levels, set trading.takeProfitStopLossEnabled: true in the same config.

Point value​

Point value (properties.trade.pointValue) is used when the chart calculates Qty and monetary Reward / Risk labels on long and short Risk Reward drawings. See Point value and quantity in DXcharts Lite for the formula.

Set the default for new drawings via drawingsConfig on ChartReactApp. DEFAULT_DRAWINGS_CONFIG exposes risk_reward_long and risk_reward_short entries; each has { type, properties } where properties is RiskRewardProperties:

export interface RiskRewardProperties extends PointStyles, FigureXYAxisLabelsProperties {
    line: RiskRewardLines;
    background: RiskRewardBackground;
    labels?: RiskRewardLabelsProperties;
    trade?: RiskRewardTradeProperties;
    backgroundUnderlayEnabled?: boolean;
}

properties.trade fields (including pointValue and riskInputMode):

export type RiskRewardRiskInputMode = 'default' | 'percentage';
export interface RiskRewardTradeProperties {
    riskAmount?: number;
    accountSize?: number;
    pointValue?: number;
    qtyPrecision?: number;
    moneyPrecision?: number;
    ratioPrecision?: number;
    riskInputMode?: RiskRewardRiskInputMode;
    /** When true, keep risk-to-reward distance ratio. */
    fixedRatio?: boolean;
    lotSize?: number;
}

To change point value for new drawings, override properties.trade on both risk_reward_long and risk_reward_short:

import { cloneUnsafe } from '@devexperts/dxcharts-lite/dist/chart/utils/object.utils';
import { DEFAULT_DRAWINGS_CONFIG } from '@dx-private/dxchart5-react/dist/config/drawings-config';

const drawingsConfig = cloneUnsafe(DEFAULT_DRAWINGS_CONFIG);

const pointValue = 0.01; // instrument-specific

drawingsConfig.risk_reward_long.properties.trade = {
	...drawingsConfig.risk_reward_long.properties.trade,
	pointValue,
};
drawingsConfig.risk_reward_short.properties.trade = {
	...drawingsConfig.risk_reward_short.properties.trade,
	pointValue,
};

// <ChartReactApp drawingsConfig={drawingsConfig} />

If you use a themed drawingsConfig (ThemedDrawingsConfig), apply the same properties.trade.pointValue override per theme. See the Migration guide.

You can also pass initial chart settings so orders are visible when the chart loads. Pass the object as dependencies on ChartReactApp (it can be merged with chartReactConfig and other dependency fields):

export const initialTradingSettingsDependencies = {
	initialChartReactSettings: {
		trading: {
			visible: true,
			showOrders: true,
		},
	},
};

// <ChartReactApp dependencies={initialTradingSettingsDependencies} />