How to set border in column chart - Highchart

Question

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: {
            allowPointSelect: true,
            states: {
                select: {
                    color: null,
                    borderWidth:5,
                    borderColor:'Blue'
                }
            }
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }]
});

Try this link: https://stackoverflow.com/questions/7737409/set-different-colors-for-each-column-in-highcharts — Kannan K, Dec 14 '17 at 07:18
Possible duplicate of [set different colors for each column in highcharts](https://stackoverflow.com/questions/7737409/set-different-colors-for-each-column-in-highcharts) — ewolden, Dec 14 '17 at 09:01

Patata · Answer 1 · 2017-12-15T06:43:42.417

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,
  }]
});

<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; max-width: 800px; height: 400px; margin: 0 auto"></div>

Hi in post i have mention how to set different color. I updated the same. Please check — Patata, Dec 15 '17 at 06:44
Still I am not clear what you want. And what do you mean by _Bot not able to set different border color._ in my post it works — Patata, Dec 15 '17 at 07:08
Please look at this link https://stackoverflow.com/questions/47827754/how-to-add-different-color-border-in-column-highchart-like-toggle-method-onclic — Udhay, Dec 15 '17 at 07:37
I need some modification for above code: We have column bar chart with bottom div section, It should be work as toggle method as onClick of each bar shows different color border [ background color no change ] and bottom content. And again second click it should be hide...I want like toggle option. Could you please help me. — Udhay, Dec 20 '17 at 06:29

score 0 · Answer 2 · answered Dec 18 '17 at 17:25

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/

How to set border in column chart - Highchart

2 Answers2

Linked