set different bar width in the same series in column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

set different bar width in the same series 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"> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div> 
      <script type="text/javascript">
Highcharts.chart('container', {
  chart: {//from ww w.  j ava2  s . c om
    type: 'column',
    events: {
      load: function() {
        this.series[0].data[0].graphic.attr({
          x: 45,
          width: 80
        });
      }
    }
  },
  xAxis: {
    type: 'category'
  },
  plotOptions: {
    column: {
      pointWidth: 20
    }
  },
  series: [{
    data: [10, 10, 10]
  }]
});

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

Related Tutorials