Candlestick Chart

Candlestick charts display financial data showing open, high, low, and close (OHLC) values for each time period. They are the standard chart type for stock market and financial data analysis.

Interface

CandlestickChart Props

interface CandlestickChartProps {
  // Required properties
  data: CandlestickChartData;

  // Optional properties
  custom?: Partial<CandlestickChartCustom>;
  title?: string;
  getScale?: (data: CandlestickChartData) => CandlestickChartScale;
}

Data Structure

type CandlestickChartDataPoint = {
  open: number;      // Opening price
  high: number;      // Highest price
  low: number;       // Lowest price
  close: number;     // Closing price
};

type CandlestickChartData = {
  labels: string[];                      // Time period labels
  datasets: CandlestickChartDataPoint[]; // OHLC data points
  title?: string;                        // Chart title
};

type CandlestickChartScale = {
  min: number;     // Minimum value
  max: number;     // Maximum value
  step: number;    // Step interval
};

Basic Usage

import Widget from '@meursyphus/flitter-react';
import { CandlestickChart } from '@meursyphus/headless-chart';

const data = {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  datasets: [
    { open: 100, high: 110, low: 95, close: 108 },
    { open: 108, high: 115, low: 105, close: 112 },
    { open: 112, high: 118, low: 100, close: 103 },
    { open: 103, high: 107, low: 98, close: 105 },
    { open: 105, high: 120, low: 104, close: 118 }
  ],
  title: 'Stock Price'
};

function BasicCandlestickChart() {
  return (
    <Widget
      width="600px"
      height="400px"
      widget={CandlestickChart({ data })}
    />
  );
}

Chart Components

Candlestick Chart consists of the following hierarchical structure:

CandlestickChart
└── Layout (overall layout)
    ├── Title (chart title)
    ├── Legend (legend items)
    └── Plot (plot area)
        ├── XAxis (X-axis)
        ├── YAxis (Y-axis)
        ├── Grid (grid lines)
        └── Series (data series)
            └── Candlestick (individual candlestick)

Customizable Elements

You can customize the following components through the custom prop:

Component	Args	Description
`layout`	`{ title, legends, plot }`	Overall chart layout
`plot`	`{ xAxis, yAxis, series, grid }`	Plot area
`series`	`{ candlesticks }`	Data series container
`candlestick`	`{ open, high, low, close, label, index }`	Individual candlestick
`legend`	`{ name, index }`	Legend item
`title`	`{ name }`	Chart title
`dataLabel`	`{ value, label, legend }`	Data label
`xAxis`	`{ line, labels, tick }`	X-axis structure
`yAxis`	`{ line, labels, tick }`	Y-axis structure
`xAxisLabel`	`{ name, index }`	X-axis label
`yAxisLabel`	`{ name, index }`	Y-axis label
`xAxisLine`	-	X-axis line
`yAxisLine`	-	Y-axis line
`xAxisTick`	-	X-axis tick mark
`yAxisTick`	-	Y-axis tick mark
`grid`	`{ xLine, yLine }`	Grid container
`gridXLine`	-	Vertical grid line
`gridYLine`	-	Horizontal grid line

Real-World Usage Examples

1. Custom Candlestick Colors

const coloredCandlestick = CandlestickChart({
  data,
  custom: {
    candlestick: ({ open, high, low, close, label, index }) => {
      const isUp = close >= open;
      const color = isUp ? '#22c55e' : '#ef4444';
      // Custom candlestick rendering with green for up, red for down
    }
  }
});

2. Custom Grid Style

const styledChart = CandlestickChart({
  data,
  custom: {
    gridYLine: () => Container({
      height: 1,
      color: 'rgba(0, 0, 0, 0.05)'
    })
  }
});

Next Steps

For more examples, check out the demo page
Customize candlestick colors for bullish/bearish indicators
Add volume bars underneath for complete financial analysis