HighCharts stackLabels visible with hidden yAxis

1
votes

Is there a way to keep the stackLabels on a highcharts stacked column chart, but hide the yAxis?

I have borrowed this fiddle from the HC Author to show the issue. You can toggle the yAxis visibility and this also toggles the stackLabels.

My HighCharts code is:

$(function() {

  // Configure the chart
  $('#container').highcharts({

    chart: {
      type: 'column'
    },

    title: {
      text: 'Highcharts axis visibility'
    },

    xAxis: {
      categories: ['Apples', 'Pears', 'Oranges', 'Peaches']
    },

    yAxis: {
      allowDecimals: false,
      title: {
        text: 'Fruit'
      },
      stackLabels: {
        enabled: true
      },
      visible: false
    },

    plotOptions: {
      series: {
        stacking: 'normal',
        dataLabels: {
          enabled: true
        }
      }
    },

    series: [{
      data: [1, 3, 2, 4],
      name: 'Ola'
    }, {
      data: [5, 4, 5, 2],
      name: 'Kari'
    }]

  });

  var yVis = false,
    xVis = true;
  $('#toggle-y').click(function() {
    yVis = !yVis;
    $('#container').highcharts().yAxis[0].update({
      visible: yVis
    });
  });
  $('#toggle-x').click(function() {
    xVis = !xVis;
    $('#container').highcharts().xAxis[0].update({
      visible: xVis
    });
  });
});

Can stackLabels be visible with a hidden yAxis?

1
highcharts

1 Answers

2
votes

You can manipulate on elements in yAxis, instead of set the visibility.

    $('#toggle-y').click(function() {
       yVis = !yVis;
         $('#container').highcharts().yAxis[0].update({
            labels: {
            enabled: yVis
         },
         gridLineWidth: yVis ? 1 : 0,
         title:{
            enabled: yVis
         }
       });
  });

Example: