CODEWITHSUNDEEP
highcharts
saicharan ponnoju
saicharan ponnoju

Reputation: 3

How to set a different value on opposite y-axis in bar-negative high charts

I wanted to have different values on the left(negative) side as 1k ,2k,3k etc and different values on the right(positive) side of y-axis like 100,200,300 etc...

I tried different approaches by having conditions in labels formatter function

// Data gathered from http://populationpyramid.net/germany/2015/

// Age categories
var categories = [
  '48-51', '51-54', '57-60', '60-63',
  '63-66'
],
oppositecategories = [];


Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Headcount and Hires Age Distribution'
  },
  subtitle: {
    text: 'Lorem Ipsum'
  },
  xAxis: [{
    categories: categories,
    reversed: false,
    labels: {
      step: 1
    }
  }, { // mirror axis on right side
    opposite: true,
    reversed: false,
    categories: oppositecategories,
    linkedTo: 0,
    labels: {
      step: 1
    }
  }],
  yAxis: [{
      title: {
        text: null
      },
      labels: {
        formatter: function() {
          return Math.abs(this.value) + 'K';
        },
        y: 10
      }
    },
    {
      title: {
        text: null
      },
      opposite: false,
      reversed: false,
      labels: {
        step: 100,
        y: 100
      }
    }
  ],
  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 * 1000), 0);
    }
  },

  series: [{
    name: 'Current HC',
    data: [-2.132, -1.387, -1.121, -1.479, -1.239]
  }, {
    name: 'Hires(4Q)',
    data: [
      1.17, 1.72, 1.36, 1.03, 1.21
    ]
  }]
});

I expect different values on negative side and different values on positive side

Upvotes: 0

Views: 264

Answers (2)

ppotaczek
ppotaczek

Reputation: 39069

You can create two separate yAxis for the series:

yAxis: [{
    max: 0,
    offset: 0,
    width: '50%'
}, {
    min: 0,
    offset: 0,
    left: '50%',
    width: '50%'
}]

Live demo: http://jsfiddle.net/BlackLabel/Lgqyc4k8/

Upvotes: 1

Core972
Core972

Reputation: 4114

Using yAxis.labels.formatter you can have this result :

yAxis: [{
  title: {
    text: null
  },
  tickInterval:0.1,
  labels: {
    formatter: function() {
      if(this.value < 0 && this.value % 0.5 === 0){ // Negative value only on .5 k
        return Math.abs(this.value) + 'K';
      } else if(this.value > 0){ // Positive values
        return this.value * 1000;
      } else if (this.value === 0) {
        return 0;
      }
    },
    y: 10
  }
},

Fiddle

Upvotes: 0

Related Questions