Double X-axis within same Highchart object

Question

I am able to make the below chart with two different highchart objects. But I need to make it with a single highchart object ( within the same Y-axis, I want to apply two series data in two X-axis).

Answer 1

You can achieve it easily using two xAxis and two series bonded to them:

Code:

Highcharts.chart('container', {
	chart: {
  	type: 'bar'
  },
  xAxis: [{
  	height: '50%',
    opposite: true
  }, {
  	height: '50%',
    top: '50%',
    offset: 0,
    opposite: true
  }],
  yAxis: {
  	reversed: true
  },
  plotOptions: {
  	series: {
    	pointPadding: 0,
      groupPadding: 0,
      borderWidth: 0
    }
  },
  series: [{
  	xAxis: 0,
    data: [
      439,
      525,
      571,
      696,
      970,
      119
    ]
  }, {
  	xAxis: 1,
  	data: [
    	234,
      123,
     	444,
      322,
      543,
      657
    ]
  }],
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

Demo:

• https://jsfiddle.net/BlackLabel/nh7Lmkqc/