Skip to content

Ohlc

Overview

The ohlc trace type is used to create OHLC (Open, High, Low, Close) charts, which are commonly used to visualize stock market data or financial data over time. OHLC charts represent price movements for a given period using vertical bars for high and low prices, and tick marks for open and close prices.

You can customize the colors, bar widths, and date ranges to represent financial data effectively.

Common Uses

  • Stock Market Visualization: Displaying price movement data for stocks, currencies, or commodities.
  • Financial Time Series: Visualizing price fluctuations over time.
  • Trading Analysis: Understanding market trends through candlestick-like visualizations.

Check out the Attributes for the full set of configuration options

Examples

Common Configurations

Here's a simple ohlc plot showing the Open, High, Low, and Close prices of a stock over time:

You can copy this code below to create this chart in your project:

models:
  - name: ohlc-data
    args:
      - echo
      - |
        date,open,high,low,close
        2023-01-01,100,105,95,102
        2023-01-02,102,108,101,107
        2023-01-03,107,110,105,109
        2023-01-04,109,112,107,111
        2023-01-05,111,114,110,113
traces:
  - name: Simple OHLC Plot
    model: ${ref(ohlc-data)}
    props:
      type: ohlc
      x: ?{date}
      open: ?{open}
      high: ?{high}
      low: ?{low}
      close: ?{close}
      increasing:
        line:
          color: "#17becf"
      decreasing:
        line:
          color: "#ff7f0e"
charts:
  - name: Simple OHLC Chart
    traces:
      - ${ref(Simple OHLC Plot)}
    layout:
      title:
        text: Simple OHLC Chart<br><sub>Stock Price Movements Over Time</sub>
      xaxis:
        title:
          text: "Date"
      yaxis:
        title:
          text: "Price"

This example demonstrates an ohlc plot with custom bar widths to adjust the spacing between the OHLC bars:

Here's the code:

models:
  - name: ohlc-data-width
    args:
      - echo
      - |
        date,open,high,low,close
        2023-02-01,200,205,195,202
        2023-02-02,202,208,201,207
        2023-02-03,207,210,205,209
        2023-02-04,209,212,207,211
        2023-02-05,211,214,210,213
traces:
  - name: OHLC Plot with Custom Width
    model: ${ref(ohlc-data-width)}
    props:
      type: ohlc
      x: ?{date}
      open: ?{open}
      high: ?{high}
      low: ?{low}
      close: ?{close}
      increasing:
        line:
          color: "#2ca02c"
      decreasing:
        line:
          color: "#d62728"
      line:
        width: 3
charts:
  - name: OHLC Chart with Custom Width
    traces:
      - ${ref(OHLC Plot with Custom Width)}
    layout:
      title:
        text: OHLC Plot with Custom Width<br><sub>Stock Prices with Custom Bar Width</sub>
      xaxis:
        title:
          text: "Date"
      yaxis:
        title:
          text: "Price"

This example shows an ohlc plot comparing multiple stocks' Open, High, Low, and Close prices over time:

Here's the code:

models:
  - name: ohlc-data-multi
    args:
      - echo
      - |
        stock,date,open,high,low,close
        AAPL,2023-03-01,150,155,145,152
        AAPL,2023-03-02,152,158,150,156
        AAPL,2023-03-03,156,160,154,159
        MSFT,2023-03-01,250,255,245,252
        MSFT,2023-03-02,252,258,250,256
        MSFT,2023-03-03,256,260,254,259
traces:
  - name: OHLC Plot for AAPL
    model: ${ref(ohlc-data-multi)}
    props:
      type: ohlc
      x: ?{date}
      open: ?{open}
      high: ?{high}
      low: ?{low}
      close: ?{close}
      increasing:
        line:
          color: "#1f77b4"
      decreasing:
        line:
          color: "#ff7f0e"
    filters: 
      - ?{stock = 'AAPL'}
  - name: OHLC Plot for MSFT
    model: ${ref(ohlc-data-multi)}
    props:
      type: ohlc
      x: ?{date}
      open: ?{open}
      high: ?{high}
      low: ?{low}
      close: ?{close}
      increasing:
        line:
          color: "#2ca02c"
      decreasing:
        line:
          color: "#d62728"
    filters: 
      - ?{stock = 'MSFT'}
charts:
  - name: OHLC Chart with Multiple Stocks
    traces:
      - ${ref(OHLC Plot for AAPL)}
      - ${ref(OHLC Plot for MSFT)}
    layout:
      title:
        text: OHLC Chart with Multiple Stocks<br><sub>Comparing AAPL and MSFT Stock Prices</sub>
      xaxis:
        title:
          text: "Date"
      yaxis:
        title:
          text: "Price"

A schema to validate plotly trace properties

Attributes

These attributes apply to traces where trace.props.type is set to ohlc. You would configure these attributes on the trace with the trace.props object. 

close: array
closesrc: 'string' #(1)!
customdata: array
customdatasrc: 'string' #(2)!
decreasing:
  line:
    color: any
    dash: 'string' #(3)!
    width: number
high: array
highsrc: 'string' #(4)!
hoverinfo: array
hoverinfosrc: 'string' #(5)!
hoverlabel:
  align: array
  alignsrc: 'string' #(6)!
  bgcolor: array
  bgcolorsrc: 'string' #(7)!
  bordercolor: array
  bordercolorsrc: 'string' #(8)!
  font:
    color: array
    colorsrc: 'string' #(9)!
    family: 'string | array' #(10)!
    familysrc: 'string' #(11)!
    lineposition: array
    linepositionsrc: 'string' #(12)!
    shadow: 'string | array' #(13)!
    shadowsrc: 'string' #(14)!
    size: array
    sizesrc: 'string' #(15)!
    style: array
    stylesrc: 'string' #(16)!
    textcase: array
    textcasesrc: 'string' #(17)!
    variant: array
    variantsrc: 'string' #(18)!
    weight: array
    weightsrc: 'string' #(19)!
  namelength: array
  namelengthsrc: 'string' #(20)!
  split: boolean
hovertext: 'string | array' #(21)!
hovertextsrc: 'string' #(22)!
ids: array
idssrc: 'string' #(23)!
increasing:
  line:
    color: any
    dash: 'string' #(24)!
    width: number
legend: string
legendgroup: 'string' #(25)!
legendgrouptitle:
  font:
    color: any
    family: 'string' #(26)!
    lineposition: any
    shadow: 'string' #(27)!
    size: number
    style: any
    textcase: any
    variant: any
    weight: integer
  text: 'string' #(28)!
legendrank: number
legendwidth: number
line:
  dash: 'string' #(29)!
  width: number
low: array
lowsrc: 'string' #(30)!
metasrc: 'string' #(31)!
name: 'string' #(32)!
opacity: number
open: array
opensrc: 'string' #(33)!
showlegend: boolean
stream:
  maxpoints: number
  token: 'string' #(34)!
text: 'string | array' #(35)!
textsrc: 'string' #(36)!
tickwidth: number
type: ohlc
uid: 'string' #(37)!
visible: any
x: array
xaxis: string
xcalendar: any
xhoverformat: 'string' #(38)!
xperiodalignment: any
xsrc: 'string' #(39)!
yaxis: string
yhoverformat: 'string' #(40)!
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 dash style of lines. Set to a dash type string (solid, dot, dash, longdash, dashdot, or longdashdot) or a dash length list in px (eg 5px,10px,2px,2px).
  4. Sets the source reference on Chart Studio Cloud for high.
  5. Sets the source reference on Chart Studio Cloud for hoverinfo.
  6. Sets the source reference on Chart Studio Cloud for align.
  7. Sets the source reference on Chart Studio Cloud for bgcolor.
  8. Sets the source reference on Chart Studio Cloud for bordercolor.
  9. Sets the source reference on Chart Studio Cloud for color.
  10. 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.
  11. Sets the source reference on Chart Studio Cloud for family.
  12. Sets the source reference on Chart Studio Cloud for lineposition.
  13. 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.
  14. Sets the source reference on Chart Studio Cloud for shadow.
  15. Sets the source reference on Chart Studio Cloud for size.
  16. Sets the source reference on Chart Studio Cloud for style.
  17. Sets the source reference on Chart Studio Cloud for textcase.
  18. Sets the source reference on Chart Studio Cloud for variant.
  19. Sets the source reference on Chart Studio Cloud for weight.
  20. Sets the source reference on Chart Studio Cloud for namelength.
  21. Same as text.
  22. Sets the source reference on Chart Studio Cloud for hovertext.
  23. Sets the source reference on Chart Studio Cloud for ids.
  24. Sets the dash style of lines. Set to a dash type string (solid, dot, dash, longdash, dashdot, or longdashdot) or a dash length list in px (eg 5px,10px,2px,2px).
  25. 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.
  26. 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.
  27. 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.
  28. Sets the title of the legend group.
  29. Sets the dash style of lines. Set to a dash type string (solid, dot, dash, longdash, dashdot, or longdashdot) or a dash length list in px (eg 5px,10px,2px,2px). Note that this style setting can also be set per direction via increasing.line.dash and decreasing.line.dash.
  30. Sets the source reference on Chart Studio Cloud for low.
  31. Sets the source reference on Chart Studio Cloud for meta.
  32. Sets the trace name. The trace name appears as the legend item and on hover.
  33. Sets the source reference on Chart Studio Cloud for open.
  34. The stream id number links a data trace on a plot with a stream. See https://chart-studio.plotly.com/settings for more details.
  35. 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.
  36. Sets the source reference on Chart Studio Cloud for text.
  37. Assign an id to this trace, Use this to provide object constancy between traces during animations and transitions.
  38. 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.
  39. Sets the source reference on Chart Studio Cloud for x.
  40. 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.