Default Light Theme

Use the built-in light theme by passing its name:

<Chart theme="light" data={data}>
  ...
</Chart>

The theme provides complete chart, panel, and layer defaults. Layer styling uses the current series and markers structure:

const lightThemeShape = {
  chart: {
    backgroundColor: 'white',
    // borders, xAxis, grid, and crosshairs
  },
  panels: {
    // padding, borders, and controls
  },
  layers: {
    candlesticks: {
      series: {
        body: {
          up: { backgroundColor: '#10b981' },
          down: { backgroundColor: '#ef4444' },
          flat: { backgroundColor: '#333' },
        },
        wick: {
          up: { color: '#10b981' },
          down: { color: '#ef4444' },
          flat: { color: '#333' },
        },
      },
      markers: {
        value: {
          // up, down, and flat marker styles
        },
      },
      legend: {},
      yAxis: {},
    },
    sma: {
      series: {
        value: { color: 'orange', width: 1, style: 'solid' },
      },
      markers: {
        value: {},
      },
      legend: {},
      yAxis: {},
    },
  },
};

The complete theme includes entries for:

• Candlesticks, price line, and volume bars
• ADX, ATR, Bollinger Bands, CCI, EMA, MACD
• OBV, Parabolic SAR, RSI, SMA, Stochastic, and Williams %R

Pass a full custom Theme object when replacing the built-in theme. For local changes, prefer configuring the relevant layer component, such as series, markers, legend, or yAxis.