CODEWITHSUNDEEP
javascriptjqueryhighchartsaxes
dogbane
dogbane

Reputation: 274542

Highcharts: make the X and Y axes intersect at 0

I'm trying to make the X and Y axes of my chart intersect at 0, always. Currently, I'm intercepting the 'load' event and then changing the offset of the axes which works initially, but when the window is resized or the chart is zoomed in, the axes don't update.

How can I keep the axes centred on 0 even when the window is resized or the chart zoomed?

Here's my fiddle and code: http://jsfiddle.net/a003mc4b/

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'scatter',
            zoomType: 'xy',
            events: {
                load : function() {
                    this.xAxis[0].update({
                            offset: -this.yAxis[0].translate(0)
                        });
                    this.yAxis[0].update({
                            offset: -this.xAxis[0].translate(0)
                        });
                }
            },
        },

        title: {
            text: 'X and Y axis should intersect at 0'
        },
        yAxis: {
            lineColor: '#FF0000',
            lineWidth: 1
        },
        xAxis: {
            lineColor: '#FF0000',
            lineWidth: 1
        },  
        series: [{
            data: [[0,0],[1,1],[2,5],[-1,-5],[0,5]]
        }]
    });
});

Upvotes: 1

Views: 1136

Answers (2)

Strikers
Strikers

Reputation: 4776

you can use the concept of plot lines.

you can plot a line each for xAxis and Yaxis an 0. this will make them intersect at 0 always even when you resize

xAxis: [{
 plotLines: [{
                value: 0,
                 width: 2,
                color: 'blue'
            }]
}],
yAxis : [{
 plotLines: [{
                value: 0,
                 width: 2,
                color: 'blue'
            }]    
}]

updated your js fiddle here,

this thing will not get affected even you resize.

Upvotes: 1

Swetha
Swetha

Reputation: 746

Try something like this:

yAxis: {
    offset: -15
},

Check this fiddle: http://jsfiddle.net/a003mc4b/2/

Upvotes: 0

Related Questions