Double X-axis within same Highchart object

user_5555537 0
Viewed 62

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).

barchart

highcharts bar-chart
1 Answers

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:

user_100779250
Related