CODEWITHSUNDEEP
javascriptjqueryhighcharts
Udhay
Udhay

Reputation: 35

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

Upvotes: 2

Views: 2170

Answers (2)

Kamil Kulig
Kamil Kulig

Reputation: 5826

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/

Upvotes: 0

Patata
Patata

Reputation: 273

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>

Upvotes: 2

Related Questions