Remove border from multiple plots of Stacked and Grouped Column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

Remove border from multiple plots of Stacked and Grouped 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> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
      <script type="text/javascript">
Highcharts.chart('container', {
  chart: {/*w w w  .jav a 2s.  c o  m*/
    type: 'column'
  },
  title: {
    text: 'Leaves'
  },
  xAxis: {
    categories: ['jan', 'feb', 'march', 'april', 'may']
  },
  yAxis: {
    allowDecimals: false,
    min: 0,
    title: {
      text: 'Number of fruits'
    }
  },
  tooltip: {
    formatter: function() {
      return '<b>' + this.x + '</b><br/>' +
        this.series.name + ': ' + this.y + '<br/>' +
        'Total: ' + this.point.stackTotal;
    }
  },
  plotOptions: {
    column: {
      borderColor: 'black',
      stacking: 'normal',
      grouping: false,
    }
  },
  series: [{
    name: 'Border',
    linkedTo: 'leaves',
    color: 'transparent',
    enableMouseTracking: false,
    borderWidth: 2,
    stack: 1,
    data: [18, 14]
  }, {
    id: 'leaves',
    name: 'Leaves',
    borderWidth: 0,
    stack: 0,
    data: [{
      x: 0,
      y: 1,
      color: 'white'
    }, {
      x: 0,
      y: 1,
      color: 'white'
    }, {
      x: 0,
      y: 1,
      color: 'white'
    }, {
      x: 0,
      y: 1,
      color: 'white'
    }, {
      x: 0,
      y: 1,
      color: 'white'
    }, {
      x: 0,
      y: 1,
      color: 'white'
    }, {
      x: 0,
      y: 1,
      color: 'white'
    }, {
      x: 0,
      y: 1,
      color: 'white'
    }, {
      x: 0,
      y: 1,
      color: 'white'
    }, {
      x: 0,
      y: 1,
      color: 'white'
    }, {
      x: 0,
      y: 1,
      color: 'white'
    }, {
      x: 0,
      y: 1,
      color: 'white'
    }, {
      x: 0,
      y: 1,
      color: 'white'
    }, {
      x: 0,
      y: 3,
      color: 'red'
    }, {
      x: 0,
      y: 1,
      color: 'white'
    }, {
      x: 0,
      y: 1,
      color: 'white'
    }, {
      x: 1,
      y: 1,
      color: 'white'
    }, {
      x: 1,
      y: 1,
      color: 'white'
    }, {
      x: 1,
      y: 1,
      color: 'white'
    }, {
      x: 1,
      y: 1,
      color: 'white'
    }, {
      x: 1,
      y: 1,
      color: 'white'
    }, {
      x: 1,
      y: 1,
      color: 'white'
    }, {
      x: 1,
      y: 1,
      color: 'white'
    }, {
      x: 1,
      y: 5,
      color: 'red'
    }, {
      x: 1,
      y: 1,
      color: 'white'
    }, {
      x: 1,
      y: 1,
      color: 'white'
    }]
  }]
});

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

Related Tutorials