Align y axis tick “outside” on highstock, so they are the same as on highcharts

4
votes

Is it possible to align the y axis tick "outside" on a highstock graph, so that it aligns with the gridline, rather than being "inside" and sat on top of the gridline. The documentation for highstock suggests that it should be placed "outside" by default, but looking at every example of a highstock graph, they always appear to be "inside".

tickPosition: String. The position of the major tick marks relative to the axis line. Can be one of inside and outside. Defaults to "outside".

Highchart example (what I want): http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/

Highstock example (what I get): http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/basic-line/

Many thanks in advance.

Update - a solution of sorts

I came to the realisation that a Highcharts.StockChart is just a pre-configured version of Highcharts.Chart in the highstock.js file.

HighCharts.Chart has all the features of a Highcharts.StockChart - not just the features of a Highcharts.Chart in the highcharts.js file.

As a result, I have just used a highstock.js Highcharts.Chart with the configuration I require, and this places the yAxis labels in the correct position.

2
highchartshighstock

2 Answers

4
votes

You can use offset parameter for yAxis.

http://api.highcharts.com/highstock#yAxis.offset

EDIT:

http://jsfiddle.net/Z4zwr/1/

 yAxis : {
        labels:{
            align:'right',
            x:-10
        },
        lineWidth : 1,
        offset : 30
    },
1
votes

I've found a solution (jsfiddle): Add labels: { align: 'left' } to your yAxis options, like so:

yAxis: [{
    labels: {
        align: 'left'
    }
}]

This tells Highcharts to align the left end of the labels with the y-axis.

Updated jsfiddle: http://jsfiddle.net/r4wrf63u/