title: Plotband covered area columns to be highlighted or set opacity higher in highchart column type
body: <p>I want to set opacity of a column which is covered in plotband area. Initially opacity of column is set to 0.4. When user selects particular plot area I need to change opacity of a column under plot area to be 1(i.e. original color) How can i achieve this. </p>
  
  <p><a href="http://i.stack.imgur.com/EiBzS.jpg" rel="nofollow">In image when user mouseover or clicks some column were selected, i want those columns to set it back it's original color</a></p>
  
  <p><a href="http://jsfiddle.net/girijsbin/sfykbss5/21/" rel="nofollow">JSFiddleEx</a></p>
  
  <pre><code>$(function() {
  
  var plotbandclick = function(e) {
      var target = e.target || e.srcElement;
      //target.setAttribute('fill', '#e9e9e9');
      var classnames = target.getAttribute("class");
      if (classnames == null) {
          classnames = "";
      }
      var col = $(".plotbandactive");
      if (col.length &gt; 0 &amp;&amp; col != null) {
          col.attr("class", "");
      }
      console.log(classnames);
      if (classnames.indexOf("plotbandactive") == -1) {
          $(target).attr("class", classnames.trim() + " plotbandactive");
          //$(target).next().show();
      }
  };
  
  var plotbandmouseover = function showevent(e) {
      var target = e.target || e.srcElement;
      //target.setAttribute('fill', '#e9e9e9');
      var classnames = target.getAttribute("class");
      if (classnames == null) {
          classnames = "";
      }
      console.log(classnames);
      if (classnames.indexOf("plotbandhover") == -1) {
          $(target).attr("class", classnames.trim() + " plotbandhover");
          if (classnames.indexOf("plotbandactive") == -1) {
              //$(target).next().show();
          }
      }
  };
  
  var plotbandmouseout = function(e) {
      var target = e.target || e.srcElement;
      //target.setAttribute('fill', '#ffffff');
      var classnames = target.getAttribute("class");
      if (classnames == null) {
          classnames = "";
      }
      console.log(classnames);
      if (classnames.indexOf("plotbandhover") &gt; -1) {
          classnames = classnames.replace("plotbandhover", "");
          $(target).attr("class", classnames.trim());
          if (classnames.indexOf("plotbandactive") == -1) {
              //$(target).next().hide();
          }
      }
  };
  
  Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) {
      return ['M', x, y + width / 2, 'L', x + height, y + width / 2];
  };
  
  
  
  var chart1 = new Highcharts.Chart({
      chart: {
          renderTo: 'container',
          defaultSeriesType: 'column',
      },
      title: {
          text: 'Trend charts'
      },
      xAxis: {
          categories: ['ERIF001', 'ERIF002', 'CRIF001', 'CRIF002', 'EPVIF001'],
          tickLength: 0,
          /*lineColor: '#fff',
          lineWidth: 3,*/
          labels: {
              style: {
                  fontWeight: 'bold'
              }
          },
          plotBands: [{
              color: '#ffffff',
              label: {
                  text: 'Section 1'
              },
              from: -0.5,
              to: 0.5,
              events: {
                  click: plotbandclick,
                  mouseover: plotbandmouseover,
                  mouseout: plotbandmouseout
              }
          }, {
              color: '#ffffff',
              label: {
                  text: 'Section 2'
              },
              from: 0.5,
              to: 2.5,
              events: {
                  click: plotbandclick,
                  mouseover: plotbandmouseover,
                  mouseout: plotbandmouseout
              }
          }, {
              color: '#ffffff',
              label: {
                  text: 'Employee Preventable - EPVIF'
              },
              from: 2.5,
              to: 4.5,
              events: {
                  click: plotbandclick,
                  mouseover: plotbandmouseover,
                  mouseout: plotbandmouseout
              }
          }]
      },
      yAxis: {
          min: 0,
          minPadding: 0,
          maxPadding: 0,
          tickColor: '#fff',
          tickWidth: 1,
          tickLength: 3,
          gridLineWidth: 0,
          endOnTick: true,
          title: {
              text: ''
          },
          max: 150
      },
      credits: {
          enabled: false
      },
      legend: {
          enabled: false
      },
      tooltip: {
          pointFormat: '&lt;span style="color:{series.color}"&gt;{series.name}&lt;/span&gt;: &lt;b&gt;{point.y}&lt;/b&gt; ({point.percentage:.0f}%)&lt;br/&gt;',
          shared: false
      },
      plotOptions: {
          column: {
              stacking: 'percent',
              dataLabels: {
                  enabled: false,
                  useHTML: true,
                  formatter: function() {
                      return '&lt;div style="text-align:center"&gt;&lt;div&gt;' + this.y + '&lt;/div&gt;&lt;div&gt;&lt;img src="http://placehold.it/' + (this.y == 0 ? '5' : this.y * 2) + '/' + (this.y == 0 ? '5' : this.y * 2) + '"&gt;&lt;/div&gt;&lt;/div&gt;';
                  },
                  y: 0
              }
          },
          scatter: {
              marker: {
                  symbol: 'line',
                  lineWidth: 15,
                  radius: 38,
                  lineColor: '#993300'
              }
          },
      },
      series: [{
          name: 'Measure',
          color: 'rgba(255, 0, 0, 0.5)',
          data: [5, 3, 4, 7, 2]
      }, {
          name: 'Target',
          type: 'scatter',
          data: [82, 82, 82, 82, 82]
      }, {
          name: 'Measure',
          color: 'rgba(255, 255, 0, 0.5)',
          data: [5, 3, 4, 7, 2]
      }, {
          name: 'Target',
          type: 'scatter',
          data: [50, 50, 50, 50, 50]
      }, {
          name: 'Measure',
          color: 'rgba(0, 255, 0, 0.5)',
          data: [5, 3, 4, 7, 2]
      }, {
          name: 'Target',
          type: 'scatter',
          data: [18, 18, 18, 18,18]
      }]
  });
  </code></pre>
  
  <p>});</p>