Customization

Customize every aspect of the chart appearance.

Colors

Override default colors for candles, background, grid, and text:

CustomColors.tsx
<KlineChart
  data={data}
  width={width}
  height={450}
  bullishColor="#00C853"
  bearishColor="#FF1744"
  backgroundColor="#1a1a2e"
  gridColor="rgba(255, 255, 255, 0.05)"
  textColor="rgba(255, 255, 255, 0.5)"
  crosshairColor="rgba(255, 255, 255, 0.4)"
/>

bullishColor

bearishColor

backgroundColor

Candle Sizing

Control the width and spacing of candles:

CandleSizing.tsx
<KlineChart
  data={data}
  width={width}
  height={450}
  candleWidth={10}
  candleSpacing={4}
  minCandleWidth={3}
  maxCandleWidth={30}
  rightPaddingCandles={15}
/>

Moving Average Lines

Configure MA periods and their colors:

MAConfig.tsx
<KlineChart
  data={data}
  width={width}
  height={450}
  showMA={true}
  maPeriods={[7, 25, 99]}
  maColors={['#FFD700', '#00BFFF', '#FF69B4']}
/>