Candlestick
Overview
The candlestick trace type is commonly used in financial analysis to visualize the price movements of a stock or asset over time. It requires open, high, low, and close (OHLC) data and is useful for tracking the performance of a stock or identifying market trends.
You can control the appearance of candlestick charts through attributes such as increasing, decreasing, line, fillcolor, and more to highlight upward and downward trends in the market.
Common Uses
- Stock Market Analysis: Visualizing the performance of stocks over time.
- Trend Identification: Identifying market trends such as uptrends, downtrends, or reversals.
- Price Fluctuation Visualization: Showing how stock prices move within a specific time period (daily, weekly, etc.).
Check out the Attributes for the full set of configuration options
Examples
Common Configurations
Here's a simple candlestick plot showing stock price movements over a period:
You can copy this code below to create this chart in your project:
models:
- name: stock-data
args:
- echo
- |
date,open,high,low,close
2024-01-01,100,105,95,102
2024-01-02,102,108,99,104
2024-01-03,104,110,100,108
2024-01-04,108,112,101,107
2024-01-05,107,109,98,103
traces:
- name: Simple Candlestick Plot
model: ${ref(stock-data)}
props:
type: candlestick
x: ?{date}
open: ?{open}
high: ?{high}
low: ?{low}
close: ?{close}
charts:
- name: Simple Candlestick Chart
traces:
- ${ref(Simple Candlestick Plot)}
layout:
title:
text: Simple Candlestick Chart<br><sub>Stock Price Movements</sub>
xaxis:
rangeslider:
visible: false
title:
text: "Date"
yaxis:
title:
text: "Price (USD)"
This example includes both candlestick data and volume, providing additional insights into the market activity:
Here's the code:
models:
- name: stock-data-with-volume
args:
- echo
- |
date,open,high,low,close,volume
2024-01-01,100,105,95,102,1000000
2024-01-02,102,108,99,104,1200000
2024-01-03,104,110,100,108,1500000
2024-01-04,108,112,101,107,1100000
2024-01-05,107,109,98,103,1300000
traces:
- name: Candlestick Plot with Volume
model: ${ref(stock-data-with-volume)}
props:
type: candlestick
x: ?{date}
open: ?{open}
high: ?{high}
low: ?{low}
close: ?{close}
- name: Volume Trace
model: ${ref(stock-data-with-volume)}
props:
type: bar
x: ?{date}
y: ?{volume}
yaxis: "y2"
marker:
opacity: .5
color: 'blue'
charts:
- name: Candlestick Chart with Volume
traces:
- ${ref(Candlestick Plot with Volume)}
- ${ref(Volume Trace)}
layout:
showlegend: false
title:
text: Candlestick Chart with Volume<br><sub>Stock Price and Volume</sub>
xaxis:
title:
text: "Date"
rangeslider:
visible: false
yaxis:
title:
text: "Price (USD)"
yaxis2:
title:
text: "Volume"
overlaying: "y"
side: "right"
range: [0, 10000000]
Here's a candlestick chart with customized colors for increasing and decreasing stock prices:
You can copy this code below to create this chart in your project:
models:
- name: stock-data-colored
args:
- echo
- |
date,open,high,low,close
2024-01-01,100,105,95,102
2024-01-02,102,108,99,104
2024-01-03,104,110,100,108
2024-01-04,108,112,101,107
2024-01-05,107,109,98,103
traces:
- name: Colored Candlestick Plot
model: ${ref(stock-data-colored)}
props:
type: candlestick
x: ?{date}
open: ?{open}
high: ?{high}
low: ?{low}
close: ?{close}
increasing:
line:
color: "#17becf"
decreasing:
line:
color: "#d62728"
charts:
- name: Candlestick with Custom Colors
traces:
- ${ref(Colored Candlestick Plot)}
layout:
title:
text: Colored Candlestick Chart<br><sub>Stock Price Movements with Custom Colors</sub>
xaxis:
title:
text: "Date"
yaxis:
title:
text: "Price (USD)"
A schema to validate plotly trace properties
Attributes
These attributes apply to traces where trace.props.type is set to candlestick. You would configure these attributes on the trace with the trace.props object.
close: array
closesrc: 'string' #(1)!
customdata: array
customdatasrc: 'string' #(2)!
decreasing:
fillcolor: any
line:
color: any
width: number
high: array
highsrc: 'string' #(3)!
hoverinfo: array
hoverinfosrc: 'string' #(4)!
hoverlabel:
align: array
alignsrc: 'string' #(5)!
bgcolor: array
bgcolorsrc: 'string' #(6)!
bordercolor: array
bordercolorsrc: 'string' #(7)!
font:
color: array
colorsrc: 'string' #(8)!
family: 'string | array' #(9)!
familysrc: 'string' #(10)!
lineposition: array
linepositionsrc: 'string' #(11)!
shadow: 'string | array' #(12)!
shadowsrc: 'string' #(13)!
size: array
sizesrc: 'string' #(14)!
style: array
stylesrc: 'string' #(15)!
textcase: array
textcasesrc: 'string' #(16)!
variant: array
variantsrc: 'string' #(17)!
weight: array
weightsrc: 'string' #(18)!
namelength: array
namelengthsrc: 'string' #(19)!
split: boolean
hovertext: 'string | array' #(20)!
hovertextsrc: 'string' #(21)!
ids: array
idssrc: 'string' #(22)!
increasing:
fillcolor: any
line:
color: any
width: number
legend: string
legendgroup: 'string' #(23)!
legendgrouptitle:
font:
color: any
family: 'string' #(24)!
lineposition: any
shadow: 'string' #(25)!
size: number
style: any
textcase: any
variant: any
weight: integer
text: 'string' #(26)!
legendrank: number
legendwidth: number
line:
width: number
low: array
lowsrc: 'string' #(27)!
metasrc: 'string' #(28)!
name: 'string' #(29)!
opacity: number
open: array
opensrc: 'string' #(30)!
showlegend: boolean
stream:
maxpoints: number
token: 'string' #(31)!
text: 'string | array' #(32)!
textsrc: 'string' #(33)!
type: candlestick
uid: 'string' #(34)!
visible: any
whiskerwidth: number
x: array
xaxis: string
xcalendar: any
xhoverformat: 'string' #(35)!
xperiodalignment: any
xsrc: 'string' #(36)!
yaxis: string
yhoverformat: 'string' #(37)!
zorder: integer
- Sets the source reference on Chart Studio Cloud for
close. - Sets the source reference on Chart Studio Cloud for
customdata. - Sets the source reference on Chart Studio Cloud for
high. - Sets the source reference on Chart Studio Cloud for
hoverinfo. - Sets the source reference on Chart Studio Cloud for
align. - Sets the source reference on Chart Studio Cloud for
bgcolor. - Sets the source reference on Chart Studio Cloud for
bordercolor. - Sets the source reference on Chart Studio Cloud for
color. - HTML font family - the typeface that will be applied by the web browser. The web browser can only apply a font if it is available on the system where it runs. Provide multiple font families, separated by commas, to indicate the order in which to apply fonts if they aren't available.
- Sets the source reference on Chart Studio Cloud for
family. - Sets the source reference on Chart Studio Cloud for
lineposition. - Sets the shape and color of the shadow behind text. auto places minimal shadow and applies contrast text font color. See https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow for additional options.
- Sets the source reference on Chart Studio Cloud for
shadow. - Sets the source reference on Chart Studio Cloud for
size. - Sets the source reference on Chart Studio Cloud for
style. - Sets the source reference on Chart Studio Cloud for
textcase. - Sets the source reference on Chart Studio Cloud for
variant. - Sets the source reference on Chart Studio Cloud for
weight. - Sets the source reference on Chart Studio Cloud for
namelength. - Same as
text. - Sets the source reference on Chart Studio Cloud for
hovertext. - Sets the source reference on Chart Studio Cloud for
ids. - Sets the legend group for this trace. Traces and shapes part of the same legend group hide/show at the same time when toggling legend items.
- HTML font family - the typeface that will be applied by the web browser. The web browser can only apply a font if it is available on the system where it runs. Provide multiple font families, separated by commas, to indicate the order in which to apply fonts if they aren't available.
- Sets the shape and color of the shadow behind text. auto places minimal shadow and applies contrast text font color. See https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow for additional options.
- Sets the title of the legend group.
- Sets the source reference on Chart Studio Cloud for
low. - Sets the source reference on Chart Studio Cloud for
meta. - Sets the trace name. The trace name appears as the legend item and on hover.
- Sets the source reference on Chart Studio Cloud for
open. - The stream id number links a data trace on a plot with a stream. See https://chart-studio.plotly.com/settings for more details.
- Sets hover text elements associated with each sample point. If a single string, the same string appears over all the data points. If an array of string, the items are mapped in order to this trace's sample points.
- Sets the source reference on Chart Studio Cloud for
text. - Assign an id to this trace, Use this to provide object constancy between traces during animations and transitions.
- Sets the hover text formatting rulefor
xusing d3 formatting mini-languages which are very similar to those in Python. For numbers, see: https://github.com/d3/d3-format/tree/v1.4.5#d3-format. And for dates see: https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format. We add two items to d3's date formatter: %h for half of the year as a decimal number as well as %{n}f for fractional seconds with n digits. For example, 2016-10-13 09:15:23.456 with tickformat %H~%M~%S.%2f would display 09~15~23.46By default the values are formatted usingxaxis.hoverformat. - Sets the source reference on Chart Studio Cloud for
x. - Sets the hover text formatting rulefor
yusing d3 formatting mini-languages which are very similar to those in Python. For numbers, see: https://github.com/d3/d3-format/tree/v1.4.5#d3-format. And for dates see: https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format. We add two items to d3's date formatter: %h for half of the year as a decimal number as well as %{n}f for fractional seconds with n digits. For example, 2016-10-13 09:15:23.456 with tickformat %H~%M~%S.%2f would display 09~15~23.46By default the values are formatted usingyaxis.hoverformat.