stackLabels visible with hidden yAxis in column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Column Chart

Description

stackLabels visible with hidden yAxis in column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <style id="compiled-css" type="text/css">

#container {//from  ww  w .ja v  a 2  s.  c o m
   min-width: 300px;
   max-width: 800px;
   height: 300px;
   margin: 1em auto;
}


      </style> 
      <script type="text/javascript">
$(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',
        enabled: false
      },
      labels:{
         enabled: false
      },
      gridLineWidth: 0,
      stackLabels: {
        enabled: true
      }
    },
    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({
      labels: {
        enabled: yVis
      },
      gridLineWidth: yVis ? 1 : 0,
      title:{
         enabled: yVis
      }
        //visible: yVis
    });
  });
  $('#toggle-x').click(function() {
    xVis = !xVis;
    $('#container').highcharts().xAxis[0].update({
      visible: xVis
    });
  });
});

      </script> 
   </head> 
   <body> 
      <script src="https://github.highcharts.com/6890b6745a/highcharts.js"></script> 
      <div id="container"></div> 
      <button id="toggle-y">Toggle Y axis</button> 
      <button id="toggle-x">Toggle X axis</button>  
   </body>
</html>

Related Tutorials