How to set y-axis in HighChart?

Question

I'm using HighCharts to display the death rate. Comparison of death between Male and Female deaths with respect to age is already done and displayed.

Issue I'm facing is the values in y-axis of chart. Y-axis in the chart is the horizontal one. I want it to display values like ...,5,4,3,2,1,0,1,2,3,4,5,...

var categories = [
                    '0-10', '11-20', '21-30', '31-40',
                    '40-50', '50-60', '60-70', '70-80', '80-90',
                    '90+'
                ];

Highcharts.chart('male-female', {
    chart: { type: 'bar' },
    title: { text: 'Male Female Death Rate' },
    xAxis: [{
        categories: categories,
        reversed: false,
        labels: { step: 1 },
        accessibility: { description: 'Age (male)' } 
    },
    { // mirror axis on right side
        opposite: true,
        reversed: false,
        categories: categories,
        linkedTo: 0,
        labels: { step: 1 },
        accessibility: { description: 'Age (female)' }
    }],

    plotOptions: {
        series: { stacking: 'normal' }
    },

    series: [
        {
            name: 'Male',
            data: [ 0, -2, -1, 0, -2, -2, -1, -4, -6, -3 ]
        },
        {
            name: 'Female',
            data: [ 2, 2, 2, 2, 2, 9, 3, 1, 9, 4 ]
        }
    ]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
  <div id="male-female"></div>
</figure>

Answer 1

You should use Math.abs() in your label formatter to get the absolute value.

Your yAxis must be set to :

yAxis: {
    labels: {
        formatter: function() {
            return Math.abs(this.value);
        }
    }
}

You can use the same idea for the tooltip by using the formatter function.

tooltip: {
  formatter: function() {
    return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
      'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 1);
  }
}

var categories = [
  '0-10', '11-20', '21-30', '31-40',
  '40-50', '50-60', '60-70', '70-80', '80-90',
  '90+'
];

Highcharts.chart('male-female', {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Male Female Death Rate'
  },
  xAxis: [{
      categories: categories,
      reversed: false,
      labels: {
        step: 1
      },
      accessibility: {
        description: 'Age (male)'
      }
    },
    { // mirror axis on right side
      opposite: true,
      reversed: false,
      categories: categories,
      linkedTo: 0,
      labels: {
        step: 1
      },
      accessibility: {
        description: 'Age (female)'
      }
    }
  ],
  yAxis: {
    labels: {
      formatter: function() {
        return Math.abs(this.value);
      }
    },
    tickInterval: 1
  },
  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },
  tooltip: {
    formatter: function() {
      return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
        'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 1);
    }
  },
  series: [{
      name: 'Male',
      data: [0, -2, -1, 0, -2, -2, -1, -4, -6, -3]
    },
    {
      name: 'Female',
      data: [2, 2, 2, 2, 2, 9, 3, 1, 9, 4]
    }
  ]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
  <div id="male-female"></div>
</figure>

Answer 2

Another solution which you can implement is a creating an array with wanted ticks and use the yAxis.tickPositions feature to apply it.

Demo: https://jsfiddle.net/BlackLabel/mb5v2w1u/

code:

var ticks = [];
for(let i = -10; i <=10; i++){
    ticks.push(i)
}

API: https://api.highcharts.com/highcharts/yAxis.tickPositions

Answer 3

Try using yAxis.labels.formatter and Math.abs()

https://api.highcharts.com/highstock/yAxis.labels.formatter

yAxis: {
  tickInterval: 1, 
  labels: {
    formatter: function() {
      return Math.abs(this.value);
    }
  }
},

var categories = [
  '0-10', '11-20', '21-30', '31-40',
  '40-50', '50-60', '60-70', '70-80', '80-90',
  '90+'
];

Highcharts.chart('male-female', {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Male Female Death Rate'
  },
  xAxis: [{
      categories: categories,
      reversed: false,
      labels: {
        step: 1
      },
      accessibility: {
        description: 'Age (male)'
      }
    },
    { // mirror axis on right side
      opposite: true,
      reversed: false,
      categories: categories,
      linkedTo: 0,
      labels: {
        step: 1
      },
      accessibility: {
        description: 'Age (female)'
      }
    }
  ],

  yAxis: {
    tickInterval: 1, 
    labels: {
      formatter: function() {
        return Math.abs(this.value);
      }
    }
  },

  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },

  series: [{
      name: 'Male',
      data: [0, -2, -1, 0, -2, -2, -1, -4, -6, -3]
    },
    {
      name: 'Female',
      data: [2, 2, 2, 2, 2, 9, 3, 1, 9, 4]
    }
  ]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
  <div id="male-female"></div>
</figure>