Chart with Volume

Add a dedicated volume panel below the price chart while keeping both panels synchronized for hover, scroll, and zoom.

Code

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

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

The heightRatio prop controls the relative height of each panel. In this example the price panel is three times the height of the volume panel.

Related

• PanelConfig
• VolumeBarsLayerConfig
• Example data