0
votes

http://jsfiddle.net/wtftc/cGbUh/

$(function () {
$('#container').highcharts({
    chart: {
        plotBorderWidth: 1
    },

    xAxis: {
    },
    yAxis: [{
        startOnTick: true,
        endOnTick: true,
    }, {
        opposite: true,
        title: {
            text: null,   
        }
    }],
    title: {
        text: '',   
    },

    series: [{
        data: [-67900.92, 454001.7, -204238.28, 322154.52, 162814.29, 940881.87, 454987.58, -190981.9, 77289.43, -578758.66, 232812.59, -553224.3, -161440.06, 203872.86, -487226.65, 582178.18, 88564.43, 250057.57, -62186.0600000001, 377721.25, -196420.64, 38713.0099999999, 284969.83, 166221.67],
    }]
});


// the button action
$('#button').click(function() {
    var chart = $('#container').highcharts();
    var yAxis = chart.yAxis[0];
    yAxis.options.startOnTick = false;
    yAxis.options.endOnTick = false;

    chart.yAxis[0].setExtremes(-1034970.057, 1034970.057);
});
});

I created a jsfiddle example of what I am trying to do. I load up a chart with the data in the example, then I want to set custom values for my axis. The extremes I am setting are -1034970.057, 1034970.057 because I want my y axis values to be symmetric.

However, what I end up with in the chart is yAxis extremes of -1.5m and +3m rather than -1.5m and +1.5m. I am asking it to be symmetric, but after you push the set extremes button, you can see that it is not symmetric.

My data is dynamic and changes based on the settings on the page they are looking at, so this data is just an example of one of the many scenarios that I can encounter. This means that I can't hard code a tick interval or tick count. Is there a way to have this be symmetric?

1

1 Answers

2
votes

I got it working by setting the start/endOnTick setting to false in the chart and then to true on click.

http://jsfiddle.net/uNvvk/

yAxis: [{
        startOnTick: false,
        endOnTick: false,
    }, {


yAxis.options.startOnTick = true;
yAxis.options.endOnTick = true;

I've no idea why that works though!