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, May 01 '17 at 19:43
And a simple demo with all three axes: https://jsfiddle.net/8gwzcbsk/5/ — Paweł Fus, May 02 '17 at 11:24

score 0 · Answer 1 · answered May 02 '17 at 13:22

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 Answers1