Candlestick Chart

Key Features

Custom Value/Label Formatting

Add custom prefixes or suffixes to values and labels for contextual clarity (e.g., $125K, 75%)

Custom Value Axis Scaling

Set custom vartical axis scaling with defined min and max values

Custom Candle & Wick Width

Configure wick and candle widths independently for precise candlestick chart visualization

OHLC Data Visualization

Displays open, high, low, and close prices with bullish/bearish candles

Volume Analysis

Optional volume bars below the price chart with color-coded bullish/bearish volume

Customizable Colors

Set custom colors for bullish and bearish candles and wicks

Interactive Tooltips

Detailed hover tooltips showing OHLC values, change percentage, and volume

Customizable Zoom

Enables zoom tools, mouse scroll zooming, and adjustable zoom sensitivity for precise data navigation.

Perfect For

Stock Market Analysis

Track daily, weekly, or monthly stock price movements with volume

Cryptocurrency Trading

Monitor crypto price action with detailed OHLC and volume data

Forex Analysis

Visualize currency pair movements and trading patterns

Commodities Trading

Track gold, oil, and other commodity price movements

Technical Indicators

Analyze price trends and market sentiment using candlestick patterns alongside volume data.

Configuration Options

Option	Type	Default	Description
design	string	default	Chart design preset ('default', 'modern', 'minimalistic', 'cyberpunk', 'professional', 'custom')
background	string	transparent	Background color or gradient when design is `custom` (e.g., '#hex', 'transparent', 'linear-gradient(...)')
textColor	string	#111827	Text color when design is `custom` (e.g., '#hex')
gridColor	string	#E5E7EB	Grid line color when design is `custom` (e.g., '#hex')
borderColor	string	#D1D5DB	Border color when design is `custom` (e.g., '#hex')
borderRadius	number	8	Border radius in pixels when design is `custom` (0-20)
shadowBlur	number	10	Shadow blur radius in pixels when design is `custom` (0-30)
shadowOffset	number	2	Shadow offset in pixels when design is `custom` (0-10)
fontSize	number	12	Font size in pixels when design is `custom` (8-18)
fontFamily	string	Inter, system-ui, sans-serif	Font family when design is `custom` (e.g., 'Inter, system-ui, sans-serif')
fontWeight	string	normal	Font weight when design is `custom` ('normal', '500', '600', 'bold')

candleWidth	number	0.8	Candle width as percentage of available space (0.4-1.0)
wickWidth	number	1	Wick line width in pixels (1-3)
showVolume	boolean	false	Show volume bars below price chart
colors.bullish	string	#10B981	Color for bullish (up) candles and volume bars (e.g., '#hex')
colors.bearish	string	#EF4444	Color for bearish (down) candles and volume bars (e.g., '#hex')
colors.wick	string	#6B7280	Color for high-low wick lines (e.g., '#hex')
showGrid	boolean	true	Show background grid lines
showLabels	boolean	true	Show date labels on x-axis
showTooltip	boolean	true	Enables tooltips on hover, providing detailed data information. When enabled, also supports advanced tooltip behavior if `showAdvancedTooltip` is true.
showAdvancedTooltip	boolean	false	Enables advanced tooltip mode, snapping to the nearest labeled point or candle based on x-axis proximity when true. Requires `showTooltip` to be true for functionality.
animations	boolean	true	Enable drawing animations.
animationDuration	number	1200	Animation duration in milliseconds (500–3000). This setting determines how long the animation takes to complete when rendering data. Ignored when `animations` is set to `false`.
glowEffect	boolean	false	Enable glow effect on candles
glowEffect	boolean	false	Enable glow effect on lines and points
useKFormat	boolean	false	Enable K/M/B/T formatting for y-axis and point values (e.g., 1000 as 1.0K, 1000000 as 1.0M)
labelPrefix	string	''	Prefix for x-axis labels (e.g., 'Time: ')
labelAfterfix	string	''	Suffix for x-axis labels (e.g., ' 2023')
valuePrefix	string	''	Prefix for y-axis and point values (e.g., '$')
valueAfterfix	string	''	Suffix for y-axis and point values (e.g., ' USD')
showZoom	boolean	false	Enables zooming functionality, allowing users to zoom in on a specific range of data points using mouse scroll or touch gestures. When enabled, also shows zoom controls if `showZoomTool` is true.
showZoomTool	boolean	false	Displays an interactive zoom tool (a draggable range selector) on the chart when `showZoom` is true. Automatically disabled if `showZoom` is false.
zoomRangeStart	number	0	Sets the starting index of the zoom range (e.g., 0 for the first data point). Must be between 0 and the total number of data points minus 1, and less than or equal to `zoomRangeEnd`. Only effective when `showZoom` is true.
zoomRangeEnd	number	totalPoints	Sets the ending index of the zoom range (e.g., 6 for the last of 7 data points). Must be between 0 and the total number of data points minus 1, and greater than or equal to `zoomRangeStart`. Only effective when `showZoom` is true.
scrollSpeedMultiplier	number	1.0	Adjusts the sensitivity of mouse scroll or touch gesture zooming. Values between 0.02 (slower) and 0.2 (faster) control how quickly the zoom range changes. Only effective when `showZoom` is true.
moveSpeedMultiplier	number	1.00	Controls the speed of movement in the chart. The default is 1.0. Lower values result in slower movement, while higher values make the movement faster.
pinchZoomSensitivity	number	0.05	Controls the responsiveness of pinch-to-zoom gestures on touch devices. Recommended values range from 0.01 (very smooth and slow) to 0.1 (faster and more sensitive). Only effective when `showZoom` is true.

Example line chart with large dataset

Data Format

Basic OHLC Data

candlestickChart.setData([
                    { date: '2024-06-01', open: 150.25, high: 152.80, low: 149.10, close: 151.75 },
                    { date: '2024-06-02', open: 151.75, high: 154.30, low: 151.20, close: 153.90 },
                    { date: '2024-06-03', open: 153.90, high: 155.60, low: 152.40, close: 152.85 }
                ]);

With Volume Data

candlestickChart.setData([
                    { 
                        date: '2024-06-01', 
                        open: 150.25, 
                        high: 152.80, 
                        low: 149.10, 
                        close: 151.75, 
                        volume: 2450000 
                    },
                    { 
                        date: '2024-06-02', 
                        open: 151.75, 
                        high: 154.30, 
                        low: 151.20, 
                        close: 153.90, 
                        volume: 3120000 
                    },
                    { 
                        date: '2024-06-03', 
                        open: 153.90, 
                        high: 155.60, 
                        low: 152.40, 
                        close: 152.85, 
                        volume: 1890000 
                    }
                ]);

Data Structure

Each candle requires date, open, high, low, and close values. Include volume for volume bars when showVolume: true.

ChartForge