Highcharts with two x axis

KK

by KSK Kushwah

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div style="min-width: 310px; height: 400px; margin: 0 auto; overflow:auto">
  <div id="container" ></div>
</div>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'bar',
        height: 600
    },
    title: {
        text: 'Stacked column chart'
    },
    xAxis: [
      {
        categories: ['Header1', 'Header2', 'Header3','Header4', 'Header5', 'Header6']
      },
      {
        opposite: true,
        categories: [387, 166, 592, 34, 32, 81]
      }
    ],
    yAxis: {
        min: 0,
        title: {
            text: 'Stretegy name'
        }
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        },
        series: {
          pointWidth: 20,
          borderWidth: 0
        }
    },
    series: [
    {
    		xAxis: 0,
        name: 'before',
        dataLabels: [{
            format: '{point.y}'
        }],
        data: [
        {
        	 y:5
        },
        {
        	 y:3
        },
        {
        	 y:1
        },
        {
        	 y:9
        },
        {
        	 y:3
        },
        {
        	 y:1
        }
       ]
    },
    {
    		xAxis: 1,
        name: 'after',
        dataLabels: [{
            format: '{point.y}'
        }],
        data: [
        {
        	 y:10
        },
        {
        	 y:13
        },
        {
        	 y:9
        },
        {
        	 y:1
        },
        {
        	 y:7
        },
        {
        	 y:9
        }
       ]
    }
    ]
});