CODEWITHSUNDEEP
highcharts
Rafael code
Rafael code

Reputation: 299

Negative values causes wrong y-axis highcharts

The zero value for left axis is switched to "-80", zero value for right axis is switched to "-8" and so forth (see image attached). I have the following options for the two y-axises:

 yAxis: [{ // Primary yAxis
        categories: ["-80","-60", "-40", "-20", "0", "20", "40", "60", "80", "100", "120", "140", "160", "180", "200"],
        tickInterval: 20,
        min: -80,
        max: 200,
        floor: -80,
        ceiling: 200,
        labels: {
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        title: {
            text: 'DB 1 (kr/innsatt høne)',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
    }, { // Secondary yAxis
        categories: ["-8","-6","-4","-2","0","2","4","6","8","10","12","14","16","18","20"],
        tickInterval: 2,
        min: -8,
        max: 20,
        floor: -8,
        ceiling: 20,
        gridLineWidth: 0,
        title: {
            text: 'Fôrpris (kr/kg fôr), Eggpris (kr/kg egg)',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
            format: '{value},0',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        opposite: true,
    }],

The zero value for left axis is switched to "-80", zero value for right axis is switched to "-8"

Live demo

Anyone have some suggestions for how to solve this problem?

Thanks!

Upvotes: 1

Views: 1015

Answers (2)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

Set alignTicks as false in chart options.

chart: {
        alignTicks: false
},

Docs: - http://api.highcharts.com/highcharts#chart.alignTicks

Upvotes: 3

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

You are using min and max in combination with categories. These do not connect in the way you are expecting them to.

Using categories only replaces the numeric value 0, 1, ..., on that axis with the string that you have in your categories array, so the value 0 on your first y-axis will be replaced with the category label "-80". The values on the axis that do not have an index within your categories array will simply show as their own numeric value.

In your case I suggest removing min and max completely if you expect all categories to be showing. However if the values of your series relate to those specific numeric values then you'll be better of with correctly spacing your ticks with tickPositions or similar, and not using categories at all.

Upvotes: 1

Related Questions