Skip to main content

Overriding the Legend header

You can override the Legend header by providing a component in uiOverrides.Legend.Header on ChartReactApp.

The header is rendered at the top of the Legend, above the instrument name and OHLC values. By default it contains the quick order entry: the Buy and Sell buttons and the quantity input. The default header is shown only when trading is enabled. A custom header is always rendered.

The Legend header component receives the following properties in originalProps:

  • createOrder(type, side) places an order with the current quantity. type is 'market', 'limit', or 'stop', and side is 'buy' or 'sell'.
  • onQuantityChange updates the quantity that is shared with the other order entry controls.
  • showButtons and showQuantity come from trading.legendOrderEntry in the config.

To hide the header, pass a component that renders nothing:

<ChartReactApp
	uiOverrides={{
		Legend: {
			Header: () => null,
		},
	}}
/>

Example​

This example replaces the default quick order entry with a custom bar that has Sell and Buy buttons and a quantity stepper:

Source code​