Customization

Customize individual chart layers without replacing the whole theme. This example changes candle colors, axis labels, and RSI marker styling.

Code

import 'react-candlesticks/style.css';
import {
  Chart, Panel, Candlesticks,
  RSI, 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
            series={{
              body: {
                up: {
                  backgroundColor: 'dodgerblue',
                  borderWidth: 0
                },
                down: {
                  backgroundColor: 'white',
                  borderColor: 'dodgerblue',
                  borderWidth: 1
                },
              },
              wick: {
                up: { color: 'dodgerblue' },
                down: { color: 'dodgerblue' },
              },
            }}
            yAxis={{
              labels: { fontWeight: '900', color: 'dodgerblue' },
            }}
          />
        </Panel>
        <Panel>
          <RSI
            series={{ value: { color: 'orangered' } }}
            markers={{ value: { label: { color: 'white' } } }}
          />
        </Panel>
      </Chart>
    </div>
  );
}

Individual layer props accept the same config objects as the API. Any property not specified falls back to the active theme value. For deeper customization across the entire chart, provide a custom Theme object to the theme prop.

Related

• CandlestickLayerConfig
• DirectionalBarConfig
• DirectionalLineConfig
• YAxisConfig
• Theme
• Example data