How To Set Border In Column Chart - Highchart

Can anyone help how to set border in column chart, On click each bar to set a different border and color. Please use this Reference Code: plotOptions: { series: {

Solution 1:

Updating my previous Post.

Here I am using Highcharts default colors by index e.point.index value to set borders color of column and border width is also set by index e.point.index value by click on each column. You can also use custom array of border width and color and access this by e.point.index.

plotOptions: {
    series: {
      events: {
        click: function(e) {
          var chart = e.point.series.chart;
          e.point.select(true, true);
          chart.series[0].data[e.point.index].graphic.attr({
            'stroke': colors[e.point.index],
            'stroke-width': width[e.point.index],
            'fill':Highcharts.defaultOptions.colors[e.point.index],
          });
        }
      },
    }
  },

var colors= ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', 
   '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92'];
var width=[2,5,6,8,9,3,4] ;  

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Stacked bar chart'
  },
  xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Total fruit consumption'
    }
  },
  legend: {
    reversed: true
  },
  plotOptions: {
    series: {
      events: {
        click: function(e) {
          var chart = e.point.series.chart;
          e.point.select(true, true);
          chart.series[0].data[e.point.index].graphic.attr({
            'stroke': colors[e.point.index],
            'stroke-width': width[e.point.index],
            'fill':Highcharts.defaultOptions.colors[e.point.index],
          });
        }
      },
      /*allowPointSelect: true,
      states: {
        select: {
          borderWidth: 4,
          borderColor: '#e4b0b2'
        }
      }*/
    }
  },
  series: [{
    name: 'John',
    data: [3, 4, 4, 2, 5],
    showInLegend: false,
    name: 'Twitter Trending',
    colorByPoint: true,
  }]
});

<scriptsrc="https://code.highcharts.com/highcharts.js"></script><scriptsrc="https://code.highcharts.com/modules/exporting.js"></script><divid="container"style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

Solution 2:

You can use plotOptions.series.point.events.click callback function to update any of the point's properties (color, border etc.).

  plotOptions: {
    series: {
        point: {
        events: {
            click: function() {
            this.update({
                color: Highcharts.defaultOptions.colors[Math.round(Math.random() * 10)]
            });
          }
        }
      }
    }
  }

Live demo:http://jsfiddle.net/kkulig/dtdw81L7/