HTML5 Candlestick Charts

Candle Stick chart is a form of Column Chart which is used to represent price movements in a given time span. In Candle Stick Charts, Opening and Closing price forms the real body and a vertical Line (“Tail” or “Wick”) represents the High and Low values. When Closing Price is greater than Opening price, the body is filled with white by default and it can be overridden by risingColor property. When closing price is lesser than Opening price, the Body is filled with a color specified by dataPoint’s color property.

Cannot be combined with: Doughnut, Pie, Bar, Stacked Bar charts.

Candle Stick Chart Specific Properties

Applies To Attribute Type Default Options/Examples
dataSeries fillOpacity Number 1 .2,.4 etc
dataSeries risingColor String white “red”,”#1E990F”

Basic Candle Stick Chart

Try Editing The Code

Candle Stick Chart With Additional Customization

Try Editing The Code

  Integrations:    

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question

3 Comments

  1. Pingback: CanvasJS v1.5 with Stock Charts, Range Charts & Export as Image Feature

  2. web_trader says:

    Thank you for the library. I’m busy creating a daily candlestick chart but have the following problem:
    I’m using YQL to retrieve json data and then plot the chart. The data received is per weekday.
    All is working as expected but I’m only dealing with data for weekdays. The result is a grahp that has gaps for saturdays and sundays. I would prefer not to display weekend days on the graph since it will never contain any data (stock data is only applicable for week days).

    My current chart x-axis configuration (chart type: candlestick)
    interval: 1
    type: Day

    Is there a way I can manipulate/configure the chart to plot only data for weekdays? Hope I’m clear enough

If you have any questions, please feel free to ask in our forums. Ask Question