Indicators

Layer technical indicators into a multi-panel trading chart with price overlays, volume, and a Stochastic oscillator.

Code

import 'react-candlesticks/style.css';
import {
  BollingerBands,
  Candlesticks,
  Chart,
  Panel,
  SMA,
  Stochastic,
  VolumeBars,
  exampleData
} from 'react-candlesticks';

export default function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <Chart
        granularity="d1"
        data={exampleData}
        theme="dark"
      >
        <Panel heightRatio={3}>
          <Candlesticks/>
          <SMA period={30}/>
          <BollingerBands/>
        </Panel>
        <Panel>
          <VolumeBars/>
        </Panel>
        <Panel>
          <Stochastic/>
        </Panel>
      </Chart>
    </div>
  );
}

Overlay indicators such as <SMA> and <BollingerBands> are added as children of the price panel alongside <Candlesticks>. Volume and oscillators such as <Stochastic> work best in their own panels.

Related

• SmaLayerConfig
• BollingerBandsLayerConfig
• VolumeBarsLayerConfig
• StochasticLayerConfig
• Example data