Getting started
Chart interface
Web components
Chart internals
Data integration
Frameworks and bundlers
Mobile development
Time Span Events
Term structures

Gridlines and Axis Labels

GridLines rendering

To remove the vertical grid lines permanently, you would simply change the displayGridLines flag for the x-axis to 'false' as follows:

var stxx = new CIQ.ChartEngine(/*...*/);
//your code here
stxx.chart.xAxis.displayGridLines = false;
//more code here

On the very next draw, the grid lines will be removed. Or you can call explicitly call draw() right after you modify the setting to activate your change; assuming a chart has already been rendered using loadChart().

A complete list of parameters for both the x and y axis can be found at CIQ.ChartEngine.YAxis and CIQ.ChartEngine.XAxis

If you wish to dynamically turn on or off the axis based on particular events or conditions within the animation loop (for example if a certain number of ticks is rendered due to the user zooming in or out), you would have to reset the stxx.chart.xAxis.displayGridLines programmatically using API injections to the "drawXAxis" function. This is a more advanced process and will require more in depth understanding of API injections. In there you would have your code checking for the conditions that determine if the gridlines need to be rendered and set stxx.chart.xAxis.displayGridLines to true or false before and after drawXAxis is called. To manipulate the value before it is rendered, you would use a prepend call. To manipulate the value after it is rendered (possibly to reset it to your standard setting) you would use an append call.

These methods can also be used on the y-axis.


var stxx = new CIQ.ChartEngine(/*...*/);
//your code here
stxx.chart.yAxis.displayGridLines = false;
//more code here

Remember that contrary to the x axis, which is shared by all renderings on the chart; every panel may have it's own y axis. So a better way to disable vertical grid lines on all study panels, is by setting CIQ.ChartEngine#displayGridLinesInStudies to false. To also disable zones and center lines on studies add: CIQ.Studies.drawHorizontal=function(){};. For more details see CIQ.Studies.doPostDrawYAxis

Grid Labels spacing

idealTickSizePixels is used to define the ideal size between y-axis values in pixels. By default, it is set to 'null' to automatically calculate the spacing between the ticks/gridlines.


var stxx = new CIQ.ChartEngine(/*...*/);
//your code here
stxx.chart.panel.yAxis.idealTickSizePixels = 100; // there now will be 100 pixels in between each label and gridline on the yAxis.
//more code here

Same method can be used on the xAxis. See Custom X-axis for details.

Customizing floating price label shapes

The price labels on the y axis are drawn directly on the canvas as such the positioning and shape is not driven by the CSS.

There are several built in shapes available to choose from. See yaxisLabelStyle for more details.

Additionally you have the ability to create custom label shapes. All you have to do is create a function for it and initialize the yaxisLabelStyle to match the name of the function.

For example, the following code is a variation of the standard CIQ.roundRectArrow function called CIQ.roundRectArrowCustom. It is identical with the exception of the 'x=x+5;' line to shift it 5 pixels back.

Once you instantiate the chart object, set the yaxisLabelStyle :

var stxx = new CIQ.ChartEngine({ container: document.querySelector(".chartContainer"), layout: { candleWidth: 16, crosshair: true } });
stxx.yaxisLabelStyle = "roundRectArrowCustom";

That is all there is to it.

The following is the full code which was copied directly from the CIQ.roundRectArrow.

CIQ.roundRectArrowCustom = function(params) {
	params.x = params.x + 5; // <<< this was the only line added
	CIQ.roundRect(params, "arrow");

Customizing labels font and size

This is a simple CSS change.

You can create an override for the font-size and load after the standard css.

Here are the exact entries found in stx-chart .css:

/* -------- Axis Styles -------- */
.stx_xaxis {
	/* x-axis date styles */
	font-size: 12px;
	font-family: Helvetica;
	color: #666;

.stx_yaxis {
	/* y-axis price styles */
	font-size: 10px;
	font-family: Helvetica;
	color: #333;

You may need to increase the width and height to fit larger fonts.

For the y axis width, see CIQ.ChartEngine.YAxis#width


stxx.chart.yAxis.width = 100;
//must call the following 2 lines to activate if the axis is already drawn.

For the x axis height, see CIQ.ChartEngine#xaxisHeight


stxx.xaxisHeight = 50;

Next steps