Skip to content

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
  1. Sets the source reference on Chart Studio Cloud for close.
  2. Sets the source reference on Chart Studio Cloud for customdata.
  3. Sets the source reference on Chart Studio Cloud for high.
  4. Sets the source reference on Chart Studio Cloud for hoverinfo.
  5. Sets the source reference on Chart Studio Cloud for align.
  6. Sets the source reference on Chart Studio Cloud for bgcolor.
  7. Sets the source reference on Chart Studio Cloud for bordercolor.
  8. Sets the source reference on Chart Studio Cloud for color.
  9. 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.
  10. Sets the source reference on Chart Studio Cloud for family.
  11. Sets the source reference on Chart Studio Cloud for lineposition.
  12. 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.
  13. Sets the source reference on Chart Studio Cloud for shadow.
  14. Sets the source reference on Chart Studio Cloud for size.
  15. Sets the source reference on Chart Studio Cloud for style.
  16. Sets the source reference on Chart Studio Cloud for textcase.
  17. Sets the source reference on Chart Studio Cloud for variant.
  18. Sets the source reference on Chart Studio Cloud for weight.
  19. Sets the source reference on Chart Studio Cloud for namelength.
  20. Same as text.
  21. Sets the source reference on Chart Studio Cloud for hovertext.
  22. Sets the source reference on Chart Studio Cloud for ids.
  23. 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.
  24. 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.
  25. 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.
  26. Sets the title of the legend group.
  27. Sets the source reference on Chart Studio Cloud for low.
  28. Sets the source reference on Chart Studio Cloud for meta.
  29. Sets the trace name. The trace name appears as the legend item and on hover.
  30. Sets the source reference on Chart Studio Cloud for open.
  31. The stream id number links a data trace on a plot with a stream. See https://chart-studio.plotly.com/settings for more details.
  32. 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.
  33. Sets the source reference on Chart Studio Cloud for text.
  34. Assign an id to this trace, Use this to provide object constancy between traces during animations and transitions.
  35. Sets the hover text formatting rulefor x using 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 using xaxis.hoverformat.
  36. Sets the source reference on Chart Studio Cloud for x.
  37. Sets the hover text formatting rulefor y using 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 using yaxis.hoverformat.