javascript - Highcharts y-axis Ceiling not being respected - Stack Overflow

admin管理员组

文章数量:1288048

I have a problem with Highcharts where the Ceiling of one of my two y-axes is not being respected.

Y-axis "1" represents percentage values, so has a Floor of 0 and a Ceiling of 100.

Y-axis "2" represents monetary values, so has a Floor of 0 and a Ceiling of null.

For some reason, the labels for y-axis "1" go up to 150.

If I change the corresponding series data so that the value 0 is changed to 20, the problem seems to go away and the labels stop at 100 as they should.

var dataX = [0, 67,  43, 100, 100, 80];
var dataY = [950, 900, 807, 650, 600, 450];

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

        series: [{
            name: 'Series 1',
            data: dataX,
            yAxis: 0},
        {
            name: 'Series 2',
            data: dataY,
            yAxis: 1}],
        yAxis: [{
                floor: 0,
                ceiling: 100,
                title: {
                    text: '1'
                },
            },
            {
                floor: 0,
                ceiling: null,
                title: {
                    text: '2'
                },

                opposite: true}]});});

/

Can anyone explain why this is happening?

I have a problem with Highcharts where the Ceiling of one of my two y-axes is not being respected.

Y-axis "1" represents percentage values, so has a Floor of 0 and a Ceiling of 100.

Y-axis "2" represents monetary values, so has a Floor of 0 and a Ceiling of null.

For some reason, the labels for y-axis "1" go up to 150.

If I change the corresponding series data so that the value 0 is changed to 20, the problem seems to go away and the labels stop at 100 as they should.

var dataX = [0, 67,  43, 100, 100, 80];
var dataY = [950, 900, 807, 650, 600, 450];

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

        series: [{
            name: 'Series 1',
            data: dataX,
            yAxis: 0},
        {
            name: 'Series 2',
            data: dataY,
            yAxis: 1}],
        yAxis: [{
                floor: 0,
                ceiling: 100,
                title: {
                    text: '1'
                },
            },
            {
                floor: 0,
                ceiling: null,
                title: {
                    text: '2'
                },

                opposite: true}]});});

http://jsfiddle/2bzew/2/

Can anyone explain why this is happening?

• javascript
• highcharts

Share Improve this question Follow edited May 8, 2014 at 15:39 Zong 6,23055 gold badges3333 silver badges4646 bronze badges asked May 8, 2014 at 15:07 aleonjaleonj 17322 silver badges77 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

I had a similar problem, but I found that using the following solves the issue:

        maxPadding: 0,
        minPadding: 0,

The default for these values are both 0.05 so that will be added to your data and cause highstock to make the y axis bigger than intended. Zeroing them out seems to fix the problem for me.

I also remend to set the following so that maximum value still has a label:

        showLastLabel: true,

http://jsfiddle/M4bVz/

From Highcharts API:

When using multiple axis, the ticks of two or more opposite axes will automatically be aligned by adding ticks to the axis or axes with the least ticks. This can be prevented by setting alignTicks to false. If the grid lines look messy, it's a good idea to hide them for the secondary axis by setting gridLineWidth to 0. Defaults to true.

I have updated your fiddle with these corrections.

chart: {
        alignTicks: false
    },
...
yAxis: [{
            ...
            gridLineWidth: 0,
            ...

http://jsfiddle/2bzew/3/

You can always create your own tickPositioner, or set directly tickPositions: http://jsfiddle/2bzew/4/

See docs and more examples:

• tickPositioner
• tickPositions

本文标签： javascriptHighcharts yaxis Ceiling not being respectedStack Overflow