make a bar disappear in bar chart - Javascript highcharts

Javascript examples for highcharts:Bar Chart

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

Description

make a bar disappear in bar 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"> 
   </head> 
   <body> 
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px; width: 500px"></div> 
      <script type="text/javascript">
  Highcharts.setOptions({// ww w . j  a va 2 s  .  c  o m
  colors:['#49acdd'],
  chart:{
    style: {
      fontFamily:'Helvetica',
      color:'#384044'
    }
  }
});
var chart = Highcharts.chart('container', {
     chart: {
    type:'column',
    backgroundColor:'#158479'
  },
  title: {
    text: "Employer Organizations",
    style: {
      color: "#8A2BE2" //wmakes the text white
    }
  },
  xAxis: {
    tickWidth: 1,
    labels: {
      style: {
        color: '#cc3737'
      }
    },
    categories:[
      'Educational and School-Based','Government Orgs','Charitable Foundation Orgs','Health-care Orgs','Market Research Orgs','Technology Firms','Human Service Orgs','Accounting/Finance Firms'
    ]
  },
  yAxis: {
    gridLineWidth:0, //no gridlines
    title: {
      text:'',
      style:{
        color:'#fff'
      }
    },
    labels: {
      formatter:function(){
        return Highcharts.numberFormat(this.value,0,'', ' ,');//returns ex: 1000 to 1,000
      },
      style:{
        color:'#33FF00'
      }
    }
  },//end of y axis
  plotOptions:{
    column: {
      borderRadius: 4,
      pointPadding:0,//paddin between each column or bar
      groupPadding:0.1//Padding between each value groups, in x axis units
    },
            series: {
            point: {
                events: {
                    click: function () {
                        if (!confirm('Do you really want to remove this bar?')) {
                            return false;
                        }else{
                        this.remove();
                        }
                    }
                },
            }
        }
  },
  series: [{
    name: "Employer Organizations",
    data: [1,2,3,4,5,6,7,8]
  }]
});

      </script>  
   </body>
</html>

Related Tutorials