Candlestick Chart Guide & Documentation

Candlestick

Use a Candlestick Chart to describe price changes of a security, derivative, or currency.
In this Candlestick Chart Guide, we will go through the data-formats for Candlestick charts. Also we will see how to create a basic candlestick chart with some example code and customize it exploring different options.

Candlestick Data Format

The data format for candlestick is slightly different than other charts. ApexCharts assumes that your data is in the OHLC format as given in the below example.

Two dimensional Array (Paired)

The multi-dimensional array format accepts [[Timestamp], [O, H, L, C]]


series: [{
  data: [
    [1538856000000, [6593.34, 6600, 6582.63, 6600]], 
    [1538856900000, [6595.16, 6604.76, 6590.73, 6593.86]]
  ]
}]

Single Array

The single array format accepts [Timestamp, O, H, L, C]


series: [{
data: [
  [1538856000000, 6593.34, 6600, 6582.63, 6600], 
  [1538856900000, 6595.16, 6604.76, 6590.73, 6593.86]
]
}]

xy Format

The xy format accepts [{ x: date, y: [O,H,L,C] }].
You can also pass timestamp in the x property instead of a date String


series: [{
  data: [{
    x: new Date(2016, 01, 01),
    y: [51.98, 56.29, 51.59, 53.85]
  },
  {
    x: new Date(2016, 02, 01),
    y: [53.66, 54.99, 51.35, 52.95]
  },
  .
  .
  .
  {
    x: new Date(2016, 08, 01),
    y: [52.76, 57.35, 52.15, 57.03]
  }]
}]

Customizing the colors of candle

Candle Body Color

By default, the upward candle has a green color and the downward candle has a red color in Candlestick charts. You can change these colors by setting the below options


plotOptions: {
  candlestick: {
    colors: {
      upward: '#3C90EB',
      downward: '#DF7D46'
    }
  }
}

The above color setting will produce the following result

Candle Wick Color

The wick which indicates the high and low of a candle uses the same color as the body color. If you turn this option to FALSE, the wick uses options.stroke.colors property as a fallback color.


plotOptions: {
  candlestick: {
    wick: {
      useFillColor: true,
    }
  }
}

Keeping the useFillColor option as TRUE will produce the following result