Highcharts multiple axis with custom labels

Question

I have a Highcharts waterfall chart with two x-Axis:

 xAxis: [{
    useHTML: true,
    categories: ['ONE', 'TWO', 'THREE', 'FOUR']
    },
   {
    tickWidth: 0,
    categories: [0, 10, 12, 1],
    labels: {
      style: {
      fontSize: '12px',
      fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif',
      fontWeight: 'bold'
    },
     formatter: function(){
       return '$ ' + Highcharts.numberFormat(this.value,1)
     }
   }
 }],

example: https://jsfiddle.net/er1187/8gwzcbsk/4/

I am also trying to add custom labels on top of each bar (red labels): https://jsfiddle.net/er1187/pqfa0Lpm/

I am struggling to show all three (3) on one chart, when I add the custom labels the second axis disappears. Any way to have all three?

Thanks in advance!

Short answer is that your second xAxis disappears because you are replacing it with your data labels version of the xAxis. — wergeld
And a simple demo with all three axes: jsfiddle.net/8gwzcbsk/5 — Paweł Fus

ellier7 ellier7 · Accepted Answer · 2017-05-02T13:22:30

I was able to add all three by linking two categories:

{
    linkedTo: 0,
    categories: ['ONE', 'TWO', 'THREE','FOUR']
},
{   linkedTo: 0,
    categories: ['FIVE', 'SIX', 'SEVEN', 'EIGHT']
}

See edited jsfiddle: http://jsfiddle.net/er1187/pqfa0Lpm/

Highcharts multiple axis with custom labels

1 Answers