CODEWITHSUNDEEP
highchartsbar-chart
Mohammad Habibur Rahman
Mohammad Habibur Rahman

Reputation: 411

Double X-axis within same Highchart object

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

Upvotes: 3

Views: 147

Answers (1)

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

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:

Upvotes: 1

Related Questions