CandlestickChart

An open-source single-file JavaScript library for drawing candlestick charts.

NPM: https://www.npmjs.com/package/trading-charts

Basic Usage

Include the library:

<script src="CandlestickChart.js"></script>

Define an HTML div element as a parent for the chart. Please note that the position, width, and height style values of the div are overwritten, so you may want to wrap the div in another div for additional styling.

<div id="chart"></div>

Create the candlestick chart with the id of the div as the first argument and a second optional options argument (see below for all options):

var candlestickChart = new CandlestickChart( "chart" , {} );

Add a few candles:

for ( var i = 0 ; i < candles.length ; ++i )
{
    candlestickChart.addCandlestick( candles[i].timestamp , candles[i].open , candles[i].high , candles[i].low , candles[i].close );
}

And draw the chart:

candlestickChart.draw();

Updates

If you are using the chart to display live data that frequently updates you can use the updateCandlestick function. If a candle with the same timestamp already exists in the chart, it will be updated with the new values. If not, a new candle is added automatically.

candlestickChart.updateCandlestick( candlestick.timestamp , candlestick.open , candlestick.high , candlestick.low , candlestick.close );

Example

See the example.html file for a more detailed example.

Options

|Option|Description| |--|--| |overlayMode|Defines the behavior of the overlay. Possible values:| ||'click' - The overlay&crosshair only appear when the mouse or a finger is clicked. While the overlay is visible dragging the mouse or a finger moves the overlay. It can be hidden again with another click. Best for touch controls| ||'hover' - The overlay&crosshair are always visible and follow the mouse cursor. This best for mouse controls.| ||'none' - The overlay&crosshair are disabled| |disableGrid|Set to true to disable the grid| |disableLegend|Set to true to disable the legends| |disableCrosshair|Set to true to disable the crosshair| |disableLowHighPriceDisplay|Set to true to disable the low and high price markers in the chart| |disableCurrentMarketPrice|Set to true to disable the current market price overlay (i.e. the close price of the last candle)| |disablePanningAcceleration|Set to true to disable panning acceleration. When dragging the chart along the x-axis and letting go with some momentum, it will slowly decay if panning acceleration is enabled.| |allowOverPanning|When enabled you can pan the chart further into the empty space behind the last candle.|

General Chart Options

||| |--|--| |backgroundColor|The background color of the chart. E.g. '#222222'.| |font|The font used in the chart. Default 'sans-serif'.| |fontSize|The font size used in the chart. Default 12.| |decimalPlaces|The number of decimal places that all prices are rounded to. If no decimalPlaces option is specified, the chart will choose a sensible default value.| |marginLeft|The distance between the left edge of the canvas and the chart area.| |marginRight|The distance between the right edge of the canvas and the chart area.| |marginTop|The distance between the top edge of the canvas and the chart area.| |marginBottom|The distance between the bottom edge of the canvas and the chart area.| |watermarkImage|A url to a watermark image that is displayed in the center of the chart. You probably want to use a fairly transparent png image.|

Candle Options

||| |--|--| |greenColor|The color for green candles.| |redColor|The color for red candles.| |greenHoverColor|The color for green candles that are hovered or clicked.| |redHoverColor|The color for red candles that are hovered or clicked.| |wickWidth|The width of the wicks. Uneven numbers look better. Default 1.| |wickGreenColor|The color of the wick for green candles. By default this is the same green color as the candle's green color.| |wickRedColor|The color of the wick for red candles. By default this is the same red color as the candle's green color.| |candleBorderWidth|The border width of the candles. Default 0. If the candleBorderWidth is greater than 0, the border of the candle is drawn in the wickGreenColor&wickRedColor.|

Grid Options

||| |--|--| |xGridCells|How many grid cells are on the x-axis. Please note that this is only a rough estimate. The grid will automatically align to nice numbers.| |yGridCells|How many grid cells are on the y-axis. Please note that this is only a rough estimate. The grid will automatically align to nice numbers.| |gridLineStyle|The line style of the grid. Can either be 'dashed', 'dotted', or 'solid'.| |gridColor|The color of the grid lines.| |gridTextColor|The text color of the axis labels.|

Overlay Options

||| |--|--| |overlayBackgroundColor|The background color of the overlay.| |overlayTextColor|The text color of the overlay.| |overlayShowTime|When true the overlay will show the candle time. Default true.| |overlayShowData|When true the overlay will show the candle data. Default true.| |overlayShowChange|When true the overlay will show the change and percent change relative to the previous candle. Default true.|

Crosshair Options

||| |--|--| |crosshairColor|The color of the crosshair.| |crosshairTextColor|The text color of the crosshair markers on the axes.| |crosshairLineStyle|The line style of the crosshair. Can either be 'dashed', 'dotted', or 'solid'.| |crosshairLabelBackgroundColor|The background color of the crosshair labels. By default this is just the crosshair color.|

Market Price Options

||| |--|--| |marketPriceLineColor|The color of the current market price line.| |marketPriceTextColor|The text color of the current market price marker.| |marketPriceOpacity|The opacity of the market price background label. A value between 0 and 1, 0 being completely transparent and 1 complete opaque. Default 1.|

Control Options

||| |--|--| |scrollZoomSensitivity|The zoom sensitivity when using the mouse scroll wheel.| |touchZoomSensitivity|The zoom sensitivity when using touch controls and pinch to zoom.| |panningAccelerationDamping|If panning acceleration is enabled, this controls how fast the chart slows down. A value between 0 and 1. Default 0.975. Lower values will make the chart stop faster.|

Callback Functions

||| |--|--| |panningAtStartCallback()|Gets called when the chart is panned/scrolled along the x-axis and reaches the first candle. See example.html for an example implementation.| |panningAtEndCallback()|Gets called when the chart is panned/scrolled along the x-axis and reaches the last candle. See example.html for an example implementation.|