Skip to main content

Compare charts

Compare charts let you overlay multiple instruments on a single chart pane and visualize their percentage-based performance on a shared Y-axis.

For percent Y-axis baseline behavior and chart-core concepts, see Compare charts in DXcharts Lite / Core.

Setting compare instruments on first render​

To show compare series on the first render without using the toolbar UI, you have two options:

  1. Chart React API — after the API is ready (for example, via onApiCreated), call chartReactAPI.addCompareInstrument(symbol) for one additional instrument, or chartReactAPI.setCompareInstruments(symbols) for multiple instruments.
  2. Layout Provider — include compare instruments in the layout snapshot returned by your layoutProvider. The chart initializes with compare series from the saved layout automatically.
const onApiCreated = (api) => {
	api.addCompareInstrument('AAPL');
	// or: api.setCompareInstruments(['AAPL', 'GOOG']);
};

In multichart layouts, pass an optional chartId as the second argument to target a specific pane.

Further reading​