Chart Styles and Types

ChartIQ supports various chart styles and types. We use the term "styles" to describe the various ways that a chart can visually represent data. Examples include "candle", "line" and "mountain". We use the term "types" to describe charts that display data that has been modified through aggregation or recalculation. Examples include "Heikin Ashi", "Kagi" and "Point & Figure". In some cases, a chart "type" implies a chart "style". For instance, a Point & Figure chart aggregates data and also requires a specific display style.

Users can switch between chart styles and types without disturbing chart state. For instance, drawings and studies are maintained as a user cycles through chart types.

Note: The colors in the following screenshots are the defaults. Chart styling defaults can be modified by adjusting CSS or setting styles programmatically.

Chart Styles

Line

A line chart consists of segments that connect at the "Close" price for each time period. The line is a single color. Any value in your data that has a null value for Close will result in a gap within the line.

.stx_line_chart - Set color, width, and border-top-style to change the default display.

Line Chart

Custom Line Chart A customized line chart can be created by modifying the css for .stx_line_chart manually or calling CIQ.ChartEngine#setStyle.

The following fields can be changed:

  • color - The color of the line, it must be a rgb, rgba, #hheexx or a web-friendly color name.
  • width - Thickness of the line, it must be a number.
  • border-top-style - Pattern of the line. Three options: solid, dashed, dotted
stx.setStyle("stx_line_chart","color","blue");
stx.setStyle("stx_line_chart","width", 5);
stx.setStyle("stx_line_chart","border-top-style","dotted");

Custom Line Chart

Splined Charts

Splining is a mathematical process that rounds the connectors between segments. This results in a very pleasing, smooth look. Splining can be turned on by including the optional file "thirdParty/splines.js" into your project and then setting stxx.chart.tension to a number from 0-1 to control how much splining to apply.

Please note that technical analysts generally do not like splined charts because they obscure the actual closing prices of securities. Splining should be used only when the use case doesn't require exact values.

Colored Line

A "colored line" is a line chart with segments of various colors. Each color indicates a price action. If the close for a period is higher than that of the previous close, the line between the periods is shaded green. If the close is lower than the previous close, the line between the periods is shaded red. If the close was equal to the previous close, the line between the periods is shaded gray.

.stx_line_up and .stx_line_down to set the colors.

Colored Line Chart

Note: It is possible to set a callback function for colored line charts to programmatically determine the line color for a segment. Set stxx.customChart={colorFunction: yourCallback(stx, quote, mode)}. Your method should return a color.

Bar

Bar charts consist of vertical lines sandwiched between two ‘shelves’. One "bar" is created for each interval (period) on the chart. Each bar represents the OHLC (Open, High, Low, Close) for the period. The top and bottom of the vertical line represent the high and low for the period. The left shelf is the opening price while the right shelf is the closing price. The bars are a single color.

.stx_bar_chart - Set color and width to control the display.

Bar Chart

Colored Bar

A colored bar chart draws a bar chart with the bars colored to indicate price action. The algorithm is the same as colored_line (above).

.stx_bar_up , .stx_bar_down and .stx_bar_even - set color and width to control the display.

Colored Bar Chart

Candle

Like bar charts, candle charts represent OHLC except in the form of colored rectangles called ‘candles’. When the open is lower than the close, the candle is shaded green. When the open is higher than the close, the candle is shaded red. If the open and close are the same, a thin horizontal line segment is drawn at that price (this type of candle is called a "dojo"). Each candle has a ‘wick’ that extends beyond the candle to indicate the high and low, respectively.

.stx_candle_down and .stx_candle_up - set color for the candle color. Set border-left-color for the border color. Setting a transparent value ("transparent" or rgba(x,x,x,0)) for border-left-color will remove the border for that candle type. Setting a transparent color for color will cause the candle to be "hollow".

Candle Chart

Hollow Candle

Hollow candle charts are a special type of candle chart that displays additional information and changes the meaning of the colors. In a hollow candle chart, a green candle occurs when the closing price is higher than the prior bar's closing price. It is red when the closing price is lower than the prior bar's closing price.

Price action within the candle is indicated by whether the candle is hollow or filled. When the candle is hollow, it means that the close was higher than the open (upward price action). When the candle is filled, it means that the close was lower than the open (downward price action). If the close is the same as the open, only a gray horizontal line is drawn.

The screenshot below demonstrates hollow candle mechanics with four candles.

  • The first candle is green because its close is higher than the previous candle's close (not pictured), and it is hollow because its close was higher than its open (upward price action).
  • The second candle is green for the same reason as before, but it is filled-in because its close was lower than its open (downward price action).
  • The third candle is red because its close is lower than the previous close, and it is hollow to indicate upward price action.
  • The last candle is grey because its close is the same as the previous candle, and it is hollow to indicate upward price action, even though the open and close are identical to the previous candle.

Hollow Example

As normal candles, the same four candles would appear like this (notice the difference in shading):

Regular Example

.stx_hollow_candle_down, .stx_hollow_candle_up and .stx_hollow_candle_even - set color to control the display color.

Volume Candle

A volume candle chart is a hollow candle chart where the width of a candle varies to indicate volume. Each candle’s shading and fill follow the same conventions as those in hollow candle charts. Wide candles indicate high volume, while narrow candles indicate low volume.

Volume Candle Chart

Mountain

Mountain charts (sometimes called area charts) are line charts with a shaded section that extends to the bottom of the chart. The result is a chart which looks like a mountain.

.stx_mountain_chart

  • background-color: indicates the color of the shading
  • color: when set, will cause the shading to gradient to this color
  • border: color for the line portion of the chart
  • width: width of the line portion of the chart

Mountain Chart

Colored Mountain

Colored mountain draws a colored line chart, except the area under the line is shaded with a gradient. If the close for a period is higher than that of the previous close, the line between the periods is shaded green. If the close is lower than the previous close, the line between the periods is shaded red. If the close was equal to the previous close, the line between the periods is shaded gray.

.stx_colored_mountain_chart - controls the shading. The line portion is controlled by the same parameters as colored_line charts.

Colored Mountain Chart

Baseline Delta

A baseline delta chart draws a line chart that oscillates across a dotted baseline. The area above the baseline is shaded green, and the area below the baseline is shaded red. The baseline initializes to the left most closing value on the chart but can be adjusted by dragging the handle located on the right side of the chart. This chart style is meant to highlight the positive and negative distance from the set baseline. It is typically used for "intraday" charts where the left side (baseline) is set to the opening of the market day.

.stx_baseline - Set color to the color of the baseline (dashed horizontal line)

.stx_baseline_down and .stx_baseline_up - set color and width to control the color of the upper and lower portions of the chart. The shading is automatically based off of the line color.

Baseline Delta Chart

Baseline Delta Mountain

Baseline delta mountain draws a colored mountain chart that is intersected by a dotted baseline. The line above the baseline is shaded green, and the line below the baseline is shaded red. The baseline can be adjusted by dragging the handle located on the right.

.stx_baseline_delta_mountain - Controls the display of the shaded section. The line section is managed by the same styles that control colored_line charts.

Baseline Delta Mountain Chart

Scatterplot

Scatterplot draws a single 'dot' at every close and does not connect them.

.stx_scatter_chart - Set color to control the display of the dots.

Scatterplot Chart

Customizing Conditions for Tick Colors

The following chart styles use an internal function called colorfunction to determine the colors that can be used to programmatically set the color for the bar or line segment. The following chart styles can leverage this function:

  • Colored Line
  • Colored Bar
  • Colored Mountain
  • Candle
  • Hollow Candle
  • Volume Candle

Before displayChart is called (you can use a prepend on displayChart), an object needs to be defined in CIQ.ChartEngine as follows (assume stxx is a of type CIQ.ChartEngine):

    // style can be "candle",“colored_bar”,"colored_line",“hollow_candle”,“volume_candle”,“colored_mountain"    
    CIQ.ChartEngine.prototype.prepend("displayChart", function(chart){
        stxx.chart.customChart=
        {
            chartType: style,
            colorFunction: function(stx, quote, mode){/* 
               return a color (hex, rgb, rgba) depending on the values in quote
            */}
        }
    });

Example: The default colorFunction for colored_bar and colored_mountain:

    colorFunction=function(stx, quote, mode){
        if(quote.Close>quote.iqPrevClose) return stx.getCanvasColor("stx_line_up");
        else if(quote.Close<quote.iqPrevClose) return stx.getCanvasColor("stx_line_down");
        else return stx.getCanvasColor("stx_line_chart");
        return null;
    };

You can add conditions for many cases, such as looking at quote fields, period dates and times, or external data you have captured in closures within the colorFunction. You can also return hardcoded colors, or colors from a style sheet.

Custom Chart Styles

You can add your own chart styles using the injection API. Prepend to the function "displayChart":

    CIQ.ChartEngine.prototype.prepend("displayChart", function(chart){
         if(this.layout.chartType=="mycustomchart"){
              // code to draw custom chart, we can help with this on request |   AUTHOR NOTE: I received word from Sean that sales is leaning toward not advertising this explicitly. Take it out if you agree.
         }
    });

See Using the Injection API for more information on prepending and appending.

Chart Types

Chart "types" offer alternative ways of viewing OHLC data. Each chart type will either aggregate data or apply a formula that transforms the data. Some of these charts are "time-independent", meaning that a single bar may encompass multiple bars of price movement, resulting in an x-axis that is not linear!

Note: Time-independent charts do have periodicity associated with their bars, even though they are not plotted on a time series graph.

Available chart types are:

Heikin-Ashi

Heikin-Ashi charts are time series charts that resemble candle charts. In a normal candle chart, each candle is calculated independent of the other candles. However in Heikin-Ashi charts, the candles appear to link together as a consequence of how they are calculated. The candles are calculated as such:

  • Open = the mean of the previous open and the previous close
  • Close = the mean of the current open, close, high, and low
  • High = the maximum of the current high, open and close
  • Low = the minimum of the current low, open and close

Upward trends are indicated by green candles with wicks on top, but almost no wick on bottom. Downward trends are indicated by red candles with wicks on the bottom and almost no wick on top. Reversal points are indicated by candles, red or green, with small bodies and wicks on top and bottom. This chart type is useful in spotting trends more clearly and easily than regular candle charts.

Heikin-Ashi Chart

Kagi

Kagi charts appear as vertical bars connected by small horizontal segments at right angles. These charts are independent of time and progress forward based on price action. Thick green bars, called ‘Yang’ bars, indicate that a price has broken-out above the previous high price. Thin red bars, called ‘Yin’ bars, indicate that the price has fallen below the previous low. Unlike the other chart types, the colors of kagi lines do not directly communicate upward or downward trends.

Bars move upward or downward depending on closing prices. A bar will shift direction when a reversal limit is reached. Reversal limits are input by the user as a fixed percentage of the price. For example, imagine you have a stock valued at 10 dollars and you are drawing a kagi chart with a reversal of 10%. Depending on what trend was currently established, a cumulative 1 dollar movement in the opposite direction will break the current trend and cause a reversal.

Pressing the Auto Select button will set the reversal limit to one of two defaults. If the chart is daily, a reversal of 4% is set. If the chart is intraday, a reversal of 0.4% is set.

.stx_kagi_down and .stx_kagi_up - set color and width to control the display.

Kagi Chart

Line Break

Line break charts appear as vertical bars that ascend and descend. These charts are independent of time and are determined only by price action. Ascending bars are colored green and indicate upward price action. Descending bars are colored red, and indicate downward price action.

Line break charts are constructed by looking at the close of a bar and comparing it to a previous bar’s close (which bar to compare is determined by the user, see below). If the current bar’s close is higher than the one it is being compared to, a green ascending bar is drawn. If the current bar’s close is lower than the one that it is being compared to, a red descending bar is drawn. If the current close is the same, or if the price does not move enough in one direction or the other to signify a reversal, then no bar is drawn.

Line break charts default a value of 3, meaning it compares the current bar’s close to the bar that came 2 periods earlier. This value can be adjusted by the user, or it can be set back to the default by pressing Auto Select.

Line Break Chart

Renko

Renko charts appear as a sequence of uniformly sized bars (referred to as ‘bricks’) that connect at their corners. These charts are independent of time and are determined only by price action. Ascending bricks are colored green, and descending bricks are colored red.

Renko charts are constructed by assigning a ‘range’ value for each brick to represent. A new brick is drawn when the price moves above or below the amount signified by the previous brick. For example, let’s say you have an equity valued at 100 dollars and you’re plotting a Renko chart with a range value of 10. The next day the price closes at 109 dollars, so no new brick is drawn. The day after that the price closes at 111 dollars, which causes a new brick to be drawn because the price has increased at least 10 dollars from the previous brick. The next day the price drops to 99 dollars, which causes two downward trending bricks to be drawn. ​
Rather than setting a default value to the range field, Auto Select will fit about 300 aggregated bars of data on the chart. Consequently, auto-selected range will vary depending on what asset is being viewed.

Renko Chart

Range Bars

Range bars appear as a sequence of uniformly sized bars that connect at their corners and sometimes sit adjacent to one another. These charts are independent of time and are determined only by price action. Ascending bars are colored green, and descending bars are colored red.

Range bars are constructed by assigning a ‘range’ value for each bar to represent. A new bar is drawn when the price moves above or below the amount signified by the previous range bar. Ascending bars adjacent to descending bars indicates price oscillation between the high and low of the bars. Bars obey three rules of construction: ​

  • Bars extend the length of the specified range.
  • Bars open outside the high or low range of the previous bar.
  • Bars must close at either the high or low value.

Similar to renko charts, pressing the Auto Select button will fit about 300 aggregated bars of data on the chart. This means that the auto-selected range will vary depending on what asset is being viewed.

Range Bar Chart

Point & Figure

Point & figure (sometimes shortened to P&F or PnF) charts appear as alternating columns of X’s and O’s. These charts are independent of time and are determined only by price action. The X columns indicate upward price action, and are colored green. The O columns indicate downward price action, and are colored red.

Point & figure charts are constructed by specifying a ‘box size’ and a ‘reversal’ amount. Box size indicates the number of units the price must move in order for an X or O to be drawn in a series. The default value for box size is 1. The reversal is the number of units the price must move in the opposite direction for the current trend to switch. The default value for reversal is 3. Pressing the ‘Auto Select’ button will set the default values for both fields.

As an example, let’s say you have an equity that is valued at 10 dollars and you are plotting a point and figure chart with a box size of 1, and a reversal of 3. Your stock increases to 15 dollars, and a column of five ascending X’s is drawn. As this trend continues, more X’s will be added to that column. To break this trend, the price will have to drop at least 3 dollars, and a column of descending O’s will begin.

.stx_pandf_down and .stx_pandf_up - Set color, padding and width to control display.

Point & Figure Chart

Overriding Defaults

It is possible to set overrides for defaults like brick size, reversal value, etc. by setting the following:

  • CIQ.calculateKagi - stxx.layout.kagi (for reversal percentage)
  • CIQ.calculateLineBreak - stxx.layout.priceLines (for the number of price lines)
  • CIQ.calculateRenkoBars - stxx.layout.renko (for range/brick size)
  • CIQ.calculateRangeBars - stxx.layout.range (for range/brick size)
  • CIQ.calculatePointFigure - stxx.layout.pandf (set an object {box:The box size,reversal:The reversal amount in boxes})

Here is an example on how to override the defaults upon creating a chart:

    stxx = new CIQ.ChartEngine({ container: $$$("#chartMain") });
    stxx.layout.renko= 1.75;
    stxx.layout.range= 2.25;
    stxx.layout.kagi= 0.04;

Normally these variables will be 'undefined', and internal default calculations will be used to achieve the most optimal display. You can override the default once you create the chart object, or you can allow the user to define it each time it is rendered. There menu interfaces for these overrides in our default templates, which demonstrate how to add a pop-up to capture the user preference and set the layout parameter before calling CIQ.ChartEngine#setAggregationType.

Chart Type Colors

You can also customize the colors for the different chart types by overriding the default values found in stx-chart.css under the "Chart Type Styles" section. Note: Please do not modify stx-chart.css since it will make upgrading difficult. Instead, override values by including them in your own css file that is linked after stx-chart.css.

Chart types such as Renko can be displayed in all the standard styles (candle, line, mountain, etc.) so there aren't different styles for Renko mode, which is merely an aggregation ("type"). Kagi, on the other hand is both a "type" and a "style" and so has css classes associated with it.


Next Steps: