Class: YAxis

CIQ.ChartEngine. YAxis


new YAxis(init)

Defines an object used for rendering the Y-axis on a panel. Each panel object will automatically include a YAxis object, which can be adjusted immediately after declaring your new CIQ.ChartEngine(); Any adjustments to the Y-axis members after it has been rendered and will require a draw() call to apply the changes ( initializeChart() may be required as well depending on the setting being changed).

See Gridlines and axis labels, CIQ.ChartEngine.AdvancedInjectable#createYAxis and CIQ.ChartEngine.AdvancedInjectable#drawYAxis for additional customization instructions.

Example: stxx.panels['chart'].yAxis

Example: stxx.chart.yAxis (convenience shortcut for accessing the main panel object - same as above)

Example: stxx.panels['Aroon (14)'].yAxis

Parameters:
Name Type Description
init object

Object containing custom values for Y-axis members

Examples
// here is an example on how to override the default top and bottom margins after the initial axis has already been rendered
stxx.newChart(symbol, yourData, null, function () {    // call new chart to render your data
   	// callback - your code to be executed after the chart is loaded
		stxx.chart.yAxis.initialMarginTop=50;
		stxx.chart.yAxis.initialMarginBottom=50;
		stxx.calculateYAxisMargins(stxx.chart.panel.yAxis); // must recalculate the margins after they are changed.
		stxx.draw();
});
// here is an example on how to override the default top and bottom margins before the initial axis has been rendered
var stxx=new CIQ.ChartEngine({container:$$$(".chartContainer"), layout:{"candleWidth": 16, "crosshair":true}});
stxx.setPeriodicity({period:1, interval:1, timeUnit:"minute"}); 			// set your default periodicity to match your data. In this case one minute.
stx.chart.yAxis.initialMarginTop=50;		// set default margins so they do not bump on to the legend
stx.chart.yAxis.initialMarginBottom=50;
stx.newChart("SPY", yourData);
// here is an example on how to turn off the last price label (main chart panel) before the initial axis has already been rendered
var stxx=new CIQ.ChartEngine({container:$$$(".chartContainer"), layout:{"candleWidth": 16, "crosshair":true}});
stxx.chart.panel.yAxis.drawCurrentPriceLabel=false;

Members


defaultShadowBreaks :Array

Default setting for the array that determines how many decimal places to print based on the size of the shadow (the difference between chart high and chart low). The array consists of tuples in descending order. If the shadow is less than n1 then n2 decimal places will be printed. See CIQ.ChartEngine.YAxis#shadowBreaks

Type:
  • Array
Since:
  • 2015-11-1
Default Value:
  • ["[1000,2]","[1,4]"]

smallChartShadowBreaks :Array

Alternative setting (for small charts) array that determines how many decimal places to print based on the size of the shadow (the difference between chart high and chart low). The array consists of tuples in descending order. If the shadow is less than n1 then n2 decimal places will be printed. See CIQ.ChartEngine.YAxis#shadowBreaks

Type:
  • Array
Since:
  • 2015-11-1
Default Value:
  • ["[10,2]","[1,4]"]

bottomOffset :Number

Sets the y-axis bottom on any panel. Rendering will start this number of pixels above the panel's bottom

Visual Reference:
yAxis.width yAxis.width

Type:
  • Number

decimalPlaces :Number

Set to the required decimal places from 0 to 10, or leave null and the chart will choose automatically.

  • Note 1: this only affects the number of decimal places for the prices on the axis itself and not on the price on the floating label.
  • Note 2: study panel axis will be condenses if over 999 by the use of condenseInt.

See CIQ.ChartEngine.YAxis#maxDecimalPlaces for controlling decimal places on floating labels.
See CIQ.ChartEngine.YAxis#width as you may also need to increase the width of the y axis to fit the additional decimals.

Type:
  • Number

displayBorder :boolean

set to true to draw a line left of the y-axis and tick marks

Type:
  • boolean
Default Value:
  • true

displayGridLines :boolean

set to false to hide grid lines. See Gridlines and axis labels for additional details.

Type:
  • boolean
Default Value:
  • true

drawCurrentPriceLabel :Boolean

set to false to hide the current price label in the main panel's y-axis.

See CIQ.ChartEngine.AdvancedInjectable#drawCurrentHR

Visual Reference:
yAxis.drawCurrentPriceLabel

Type:
  • Boolean
Since:
  • 04-2015
Default Value:
  • true

drawPriceLabels :Boolean

Set to false to hide all price labels on the particular y axis.
See CIQ.ChartEngine.YAxis#drawCurrentPriceLabel to disable just the current price label on the main chart panel.
See CIQ.ChartEngine.preferences.labels to disable just the last value label on studies.

Type:
  • Boolean
Since:
  • 04-2015
Default Value:
  • true

drawSeriesPriceLabels :Boolean

set to false to hide the series price labels in the main panel's y-axis.

Type:
  • Boolean
Since:
  • 3.0.0
Default Value:
  • true

fractional :object

Set to specify that the y-axis vertical grid be drawn with fractional intervals. This is checked in CIQ.ChartEngine.AdvancedInjectable#drawYAxis and if it is not null, and there is no existing yAxis.priceFormatter, one is created to specially format the y-axis ticks.

Type:
  • object
Example
// Declare a CIQ.ChartEngine object. This is the main object for drawing charts
var stxx=new CIQ.ChartEngine({container:$$$(".chartContainer"), layout:{"candleWidth": 16, "crosshair":true}});
// set axis to display in 1/32nds; for example, 100 5/32 will display as 100'05.  If there is a price midway between
// two ticks (for example, 11/64), a plus (+) will follow the price; for example 100 11/64 will display as 100'11+.
stxx.chart.yAxis.fractional={
				formatter: "'",				// This is the character used to separate he whole number portion from the numerator (' default)
				resolution: 1/32			// Set to smallest increment for the quoted amounts

goldenRatioYAxis :Boolean

When true, will attempt to create grid lines that approximate a golden ratio between x and y axis by basing grid on CIQ.ChartEngine.YAxis#idealTickSizePixels. This creates an "airy" modern looking chart. If set to false, each axis will be adjusted separately and may create long and narrow rectangular greeds depending on date or price range.

Type:
  • Boolean
Since:

  • • 04-2015
    • 4.0.0 Now defaults to true.
Default Value:
  • true

idealTickSizePixels :Number

ideal size between y-axis values in pixels. Leave null to automatically calculate. See Gridlines and axis labels for additional details.

Type:
  • Number

increments :Array

Values used by the CIQ.ChartEngine.YAxis#pretty algorithm to set axis label locations.

Type:
  • Array
Since:
  • 2015-11-1
Default Value:
  • [1,2.5,5]

initialMarginBottom :Number

set this to automatically compress and offset the y-axis to that this many pixels of white space is below the display Note that CIQ.ChartEngine#calculateYAxisMargins will need to be called to immediately activate this setting after the axis has already been drawn.

Visual Reference:
yAxis.width

Type:
  • Number
Default Value:
  • 10
Examples
// here is an example on how to override the default top and bottom margins **before** the initial axis has been rendered
var stxx=new CIQ.ChartEngine({container:$$$(".chartContainer"), layout:{"candleWidth": 16, "crosshair":true}});
stxx.setPeriodicity({period:1, interval:1, timeUnit:"minute"});				// set your default periodicity to match your data. In this case one minute.
stxx.chart.yAxis.initialMarginTop=50;		// set default margins so they do not bump on to the legend
stxx.chart.yAxis.initialMarginBottom=50;
stxx.newChart("SPY", yourData);
// here is an example on how to override the default top and bottom margins **after** the initial axis has already been rendered
stxx.newChart(symbol, yourData, null, function () {    // call new chart to render your data
   	// callback - your code to be executed after the chart is loaded
		stxx.chart.yAxis.initialMarginTop=50;
		stxx.chart.yAxis.initialMarginBottom=50;
		stxx.calculateYAxisMargins(stxx.chart.panel.yAxis); // !!!! must recalculate the margins after they are changed. !!!!
		stxx.draw();
});

initialMarginTop :Number

Set this to automatically compress and offset the y-axis so that this many pixels of white space is above the display. Note that CIQ.ChartEngine#calculateYAxisMargins will need to be called to immediately activate this setting after the axis has already been drawn.

Visual Reference:
yAxis.width

Type:
  • Number
Default Value:
  • 10
Examples
// here is an example on how to override the default top and bottom margins **before** the initial axis has been rendered
var stxx=new CIQ.ChartEngine({container:$$$(".chartContainer"), layout:{"candleWidth": 16, "crosshair":true}});
stxx.setPeriodicity({period:1, interval:1, timeUnit:"minute"});				// set your default periodicity to match your data. In this case one minute.
stxx.chart.yAxis.initialMarginTop=50;		// set default margins so they do not bump on to the legend
stxx.chart.yAxis.initialMarginBottom=50;
stxx.newChart("SPY", yourData);
// here is an example on how to override the default top and bottom margins **after** the initial axis has already been rendered
stxx.newChart(symbol, yourData, null, function () {    // call new chart to render your data
   	// callback - your code to be executed after the chart is loaded
		stxx.chart.yAxis.initialMarginTop=50;
		stxx.chart.yAxis.initialMarginBottom=50;
		stxx.calculateYAxisMargins(stxx.chart.panel.yAxis); // !!!! must recalculate the margins after they are changed. !!!!
		stxx.draw();
});

justifyRight :Boolean

Set to true to right justify the yaxis (use with CIQ.ChartEngine.yaxisPaddingRight)

Type:
  • Boolean
Since:
  • 15-07-01

max :Number

Optionally hard set the high (top value) of the yAxis (for instance when plotting 0 - 100% charts)

Type:
  • Number

maxDecimalPlaces :Number

Controls maximum decimal places to ever display on a floating price label. Leave null and the chart will compute based on the number of decimal places in the actual data. See CIQ.ChartEngine.YAxis#decimalPlaces for controlling decimal places on the axis itself. Also see See CIQ.ChartEngine.YAxis#width as you may also need to increase the width of the y axis to fit the additional decimals.

Type:
  • Number
Default Value:
  • 5

min :Number

Optionally hard set the low (bottom value) of the yAxis (for instance when plotting 0 - 100% charts)

Type:
  • Number

minimumPriceTick :Number

Set to specify that the y-axis vertical grid be drawn with specific intervals between ticks. This amount will be overridden if it will result in y axis crowding. In which chase, multiples of the original interval will be used. For example, if .25 is selected, and that will cause labels to be on top of or too close to each other, .50 may be used. Crowding is prevented by allowing for a minimum of space equating the y-axis font height between labels.

This parameter is also used in the 'Trade From Chart' (TFC) module. If set, it will force the widget to skip certain price values and instead 'snap' to your desired intervals. This will guarantee that an order is only placed at the allowed price intervals for the security in question.

Note that this flag is not compatible with CIQ.ChartEngine.YAxis#pretty.

Visual Reference:
yAxis.minimumPriceTick

Type:
  • Number
Example
// Declare a CIQ.ChartEngine object. This is the main object for drawing charts
var stxx=new CIQ.ChartEngine({container:$$$(".chartContainer"), layout:{"candleWidth": 16, "crosshair":true}});
// set interval between ticks
stxx.chart.yAxis.minimumPriceTick=.50;

noDraw :boolean

set to true to hide the yaxis

Type:
  • boolean

position :string

Set to "left" for the yaxis to draw on the left side of the screen. The main chart axis will default to "right". The main access for any study panel will follow the main chart axis as long as this is set to null. Note that this only applies to chart panels.

Type:
  • string
Since:
  • 15-07-01
Example
// set the main y axis for the chart on the left.
stxx.chart.yAxis.position = 'left';

pretty :Boolean

If true then uses the "pretty" algorithm instead of the "best fit" algorithm. The pretty algorithm uses the values specified in CIQ.ChartEngine.YAxis#increments to set axis label locations.

Note that this algorithm is not compatible with CIQ.ChartEngine.YAxis#minimumPriceTick.

Type:
  • Boolean
Since:
  • 2015-11-1
Default Value:
  • true

prettySemiLog :Boolean

If true then uses an additional step in the "pretty" algorithm for the log scale. This allows the algorithm to lower the grid to fill large visual gaps. The "increments" are not fully respected by this approach.

Only applicable when using both pretty mode and semiLog.

Type:
  • Boolean
Since:
  • 2016-03-11
Default Value:
  • true

priceFormatter :function

Optional function used to override default formatting of Y-axis values, including the floating HUD value of the crosshair.

Expected format :

    function(stx, panel, price, decimalPlaces)

Parameters:

    stx           - CIQ.ChartEngine       - The chart object
    panel         - CIQ.ChartEngine.Panel - The panel
    price         - number                - The price to format
    decimalPlaces - number                - Optional - Suggested number of decimal places to use (may not always be present)

Returns:

    text - Formated text label for the price
Type:
  • function
Example
stxx.chart.panel.yAxis.priceFormatter=function(stx, panel, price){
	var convertedPrice;
	  // add our logic here to convert 'price' to 'convertedPrice'
   return convertedPrice; // string
}

scroll :Number

set this to the number of pixels to offset the y-axis, positive or negative.

Type:
  • Number

shadowBreaks :Array

An array that determines how many decimal places to print based on the size of the shadow (the difference between chart high and chart low). The array consists of tuples in descending order. If the shadow is less than n1 then n2 decimal places will be printed. See CIQ.ChartEngine.YAxis.defaultShadowBreaks and CIQ.ChartEngine.YAxis.smallChartShadowBreaks for default settings.

Type:
  • Array
Since:
  • 2015-11-1

textBackground :Boolean

Set to true to put a rectangle behind the yaxis text (use with CIQ.ChartEngine.yaxisPaddingRight)

Type:
  • Boolean
Since:
  • 15-07-01

textStyle :string

Override the default stx_yaxis style for text by setting this to the desired CSS style. This would typically be used to set a secondary axis to a particular color.

Type:
  • string
Since:
  • 15-07-01

topOffset :Number

Sets y-axis top on Study panels, Rendering will start this number of pixels below the panel's top

Visual Reference:
yAxis.width

Type:
  • Number

width :Number

The width in pixels.

Visual Reference:
yAxis.width

Type:
  • Number
Default Value:
  • 50

yaxisLabelStyle :string

Set to either "roundRectArrow", "semiRoundRect", "roundRect","tickedRect","rect","noop". It will default to CIQ.ChartEngine.yaxisLabelStyle This could be set independently on each panel if desired.

Type:
  • string
Since:
  • 04-2015
Example
var stxx=new CIQ.ChartEngine({container:$$$(".chartContainer"), layout:{"candleWidth": 16, "crosshair":true}});
stxx.chart.yAxis.yaxisLabelStyle="rect"

zoom :Number

Set this to the number of pixels to zoomed in or out, positive or negative. This is defined as the number of pixels to add or subtract from both top and bottom of panel for calculations.

Please note that the zoom level will be reset as determined by CIQ.ChartEngine.YAxis#initialMarginTop and CIQ.ChartEngine.YAxis#initialMarginBottom when a CIQ.ChartEngine#newChart is rendered, the CIQ.ChartEngine#home button is pressed, or when CIQ.ChartEngine.AdvancedInjectable#touchDoubleClick is activated on a touch device.

Type:
  • Number