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 STXChart(...);
//your code here
//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 newChart().

A complete list of parameters for both the x and y axis can be found at STXChart.YAxis and STXChart.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 programatically 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.

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 STXChart(...);
//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 price labels

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 STXChart.YAxis#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 STX.roundRectArrow function called STX.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 STXChart({container:$$$(".chartContainer"), layout:{"candleWidth": 16, "crosshair":true}});

That is all there is to it.

The following is the full code which was copied directly from the STX.roundRectArrow in stx.js.

STX.roundRectArrowCustom = function(ctx, x, y, width, height, radius, fill, stroke, direction) {
x=x+5; // <<< this was the only line added if (typeof stroke == "undefined") { stroke = true; } if (typeof radius === "undefined") { radius = 5; } ctx.beginPath(); ctx.moveTo(x + radius, y); ctx.lineTo(x + width - radius, y); // nw -> ne

if (direction == "right") { ctx.lineTo(x + width - radius + (height / 2), y + (height / 2)); // right arrow tip ctx.lineTo(x + width - radius, y + height); } else { ctx.quadraticCurveTo(x + width, y, x + width, y + radius); // ne corner ctx.lineTo(x + width, y + height - radius); // ne -> se ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); // se corner }

ctx.lineTo(x + radius, y + height); // se -> sw

if (direction == "right") { ctx.quadraticCurveTo(x, y + height, x, y + height - radius); // sw corner ctx.lineTo(x, y + radius); // sw -> nw ctx.quadraticCurveTo(x, y, x + radius, y); // nw corner } else { ctx.quadraticCurveTo(x, y + height, x - radius, y + height - radius); ctx.lineTo(x - (height / 2), y + (height /2)); // left arrow tip ctx.lineTo(x - radius, y + radius); ctx.quadraticCurveTo(x, y, x + radius, y); }

ctx.closePath(); if (stroke) { ctx.stroke(); } if (fill) { ctx.fill(); } };

See STXChart.AdvancedInjectable#createYAxis and STXChart.AdvancedInjectable#drawYAxis for additional customization instructions.