Chart Types and Styles

ChartIQ supports various chart types and styles out of the box.

For the purpose of this tutorial, we will use the term 'Chart Style' to refer to the different ways of visualizing the same unprocessed data. For example, you can see the raw data as a line or as a mountain. The shape is the same, the data is the same, only how it looks on the screen changes. On the other hand, you can also apply different aggregation types to the data and then display the resulting data set. We will refer to these aggregated data sets as 'Chart types'; kagi or Renko types, for example.

Please note that not all chart types and styles may be available on all packages.

Chart styles

Available chart styles to date:

  1. Line
    Line charts draw segments connecting the close price for each time period. The line is a single color.

  2. Colored Line
    The colored line chart resembles a line chart in how it is drawn. However, it is shaded like the hollow candle chart as follows: If the close for a period is higher than that of the last period, the line between the periods is shaded one color, usually green. If the close is lower than the previous close, the line between the periods is shaded another color, usually red. If the close was equal to the previous close, the line between the periods is shaded gray.

  3. Bar
    Bar charts draw vertical lines at each time period. The top of the line is the period high, while the bottom is the period low. The line is intersected from the left by a small segment placed at the open, and from the right by a small segment placed at the close.

  4. Colored Bar
    The colored bar chart resembles a bar chart in how it is drawn. However, it is shaded like the hollow candle chart as follows: If the close for a period is higher than that of the last period, the bar is shaded one color, usually green. If the close is lower than the previous close, the bar is shaded another color, usually red. If the close was equal to the previous close, the bar is shaded gray.

  5. Candle
    Candle charts are like bar charts, except instead of the small segments representing the open and close, rectangles are drawn instead over the vertical lines. The horizontal edges of the rectangle represent the open and close. If the open is higher than the close, the rectangle is colored one color, usually red. If the open is lower than the close, the rectangle is colored another color, usually green. If the open and close are the same, only a horizontal line segment is drawn at that price.

  6. Hollow Candle
    Hollow candle charts resemble candle charts in form. The difference is how the candles are shaded.
    If the close for a period is higher than that of the last period, the candle outline is shaded one color, usually green. If the close is lower than the previous close, the outline is shaded another color, usually red. If the close was equal to the previous close, the outline is shaded gray.
    If the close for a period is lower than the open for that period, the candle interior is shaded with the outline color. If the close is higher than the open for that period, the candle interior is not shaded. If the close is the same as the open, only a horizontal line is drawn, not a rectangle (like the candle chart).

  7. Volume Candle
    This chart resembles a Hollow Candle chart, but it also displays volume information. Each candlestick consists of five components: open, high, low, close and volume. As with normal candlesticks, the open and close form the body of the candlestick, while the high and low form the upper and lower shadows. Volume determines the width of the candlestick. Wide candlesticks form when volume is high, while narrow candlesticks form when volume is low.

  8. Mountain
    A mountain chart is the same as a line chart, except the area under the line is shaded. The result is a chart which looks like a mountain, hence the name.

  9. Colored Mountain
    The colored mountain chart resembles a mountain chart in how it is drawn. However, the edge is colored like the hollow candle chart as follows: If the close for a period is higher than that of the last period, the line between the periods is shaded one color, usually green. If the close is lower than the previous close, the line between the periods is shaded another color, usually red. If the close was equal to the previous close, the line between the periods is shaded gray.

  10. Baseline Delta
    This chart resembles a mountain chart, but displays green above the first (opening) tick and red below first tick. A dotted line separates red and green sections. Picks and valleys form the baseline to edge of the chart line are shaded to match the line color. User can drag the baseline up and down by clicking on the handle located on the right.

  11. Baseline Delta Mountain
    This chart resembles a mountain chart, but displays a green line above the first (opening) tick and red below first tick. A dotted line separates red and green sections. All of the chart is shaded in the same color as a mountain chart. User can drag the baseline up and dawn by clicking on the handle located on the right.

  12. Wave
    A wave chart extrapolates intraday movement from OHLC and creates 4 data points from a single candle, for instance to create a pseudo-intraday chart from daily data.
  13. Scatterplot
    This chart will render a single 'dot' per close price. It resembles a line chart without connecting the dots.
  14. Heatmap
    Given the required data input, this chart will display a line chart with variable shading based on data concentration. The more concentration near a particular data point the darker the shading.

chart styles

Customizing the conditions which determine tick colors

The following chart types use an internal function to determine the colors that should be use for a particular tick (or line portion connecting one tick to the next).

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

The function is normally used for determining the color for an up or down tick, but you can override it for determining the color of each tick based on your own logic.

This is how it's done:

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

STXChart.prototype.prepend("displayChart", function(chart){
    stxx.chart.customChart=
    {
        chartType: style,  //"candle",“colored_bar”,"colored_line",“hollow_candle”,“volume_candle”,“colored_mountain"
        colorFunction: function(stx, quote, mode){...}
    }
});

For more details on the color function see customChart.colorFunction in STXChart.Chart

One or both of these properties can be defined.

If chartType is defined, the chart drawn will always be of that style, regardless of user selection.

If colorFunction is defined, the chart will utilize this function to determine which colors to draw and under what conditions. Any number of conditions can be specified using the inputs stx (the STXChart object), quote, or mode. The function should return a color string, or null to not draw that period.

For example, here is the colorFunction which is predefined for the 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;
};

One 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. One can return hardcoded colors, or, as the example above illustrates, colors from a style sheet.

New chart styles

You can add your own chart styles using the injection API by prepending to the function displayChart

STXChart.prototype.prepend("displayChart", function(chart){
     if(this.layout.chartType=="mycustomchart"){
          // code to draw custom chart, we can help with this on request
     }
});

Chart types

chart types

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

STX.calculateRangeBars - stxxs.layout.range (The price range -brick size- for the range bars)

STX.calculateKagi - stxx.layout.kagi (The reversal percentage )

STX.calculateLineBreak - stxx.layout.priceLines ( The number of lines to use for the line break count)

STX.calculateRenkoBars - stxx.layout.renko (The price range -brick size- for the renko bars)

STX.calculatePointFigure - stxxs.layout.pandf ( object in the form of {box:The box size,reversal:The reversal amount in boxes} )

STX.calculateHeikinAshi - no override available

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 upon creating the chart object, or you can allow the user to define it each time it is rendered. There is no menu interface for these overrides in our default templates, but you can go ahead and add a pop-up to capture the user preference and set the layout parameter before calling toggleChartType in stx-advanced.html or STXChart#setAggregationType if using your own menus.

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

stxx = new STXChart({ container: $$$("#chartMain") });

stxx.layout.renko= 1.75; stxx.layout.range= 2.25; stxx.layout.kagi= 0.04;

You can also add a user interface to capture this data. If using the included menuing system, this can be done in the toggleChartType function as stated above:

function toggleChartType(type){
    // **
    // add code here to capture user overrides
    // **
    var checkbox=$$$(".stx"+type.capitalize());
    if(stxx.layout.aggregationType==type){
        STX.unappendClassName(checkbox, "true");
        stxx.setAggregationType(null);
    }else{
        if(stxx.layout.aggregationType!=null) STX.unappendClassName($$$(".stx"+stxx.layout.aggregationType.capitalize()), "true");
        STX.appendClassName(checkbox, "true");
        stxx.setAggregationType(type);
    }
}

Note: all of the code for the chart types is in stxAdvanced.js for review.

Chart type colors

You can also customize to certain extent the colors for the different chart types

Look in css/stx-chart.css under the /* -------- Chart Type Styles -------- */ section.

But remember that chart types such as Renko can be displayed in all the standard styles ( candles, lines, mountain, etc) so there are no different styles when in Renko mode, which is just an aggregation mode. Kagi, on the other hand, requires a custom chart style , so you will find the CSS entries in the above file.