set specific border width and border color dynamically for one column in column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

set specific border width and border color dynamically for one column in column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function () {// ww  w.  jav  a  2 s .  com
    $('#container').highcharts({
        series: [{
            type:'column',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }]
    },function(chart){
        $('#btn').click(function(){
            chart.series[0].data[0].graphic.attr({
                'stroke':'red',
                'stroke-width': 10
            });
        });
    });
});

      </script> 
   </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> 
      <button id="btn">update</button>  
   </body>
</html>

Related Tutorials