Multiple vertical lines with different colors on area chart, google charts. Issue line colors disappears on hovering on text

Question

Please check image below which shows multiple vertical lines with different colors. Issue here is that on hovering annotation text "test" line color gets disappear.

Please check code below.

var session_data = [["Date",{"role":"annotation"},"Value"],["2015-06-07",'test',861],["2015-06-08",'test',1381],["2015-06-09",'test',2351],["2015-06-10",'test',2125],["2015-06-11",'test',1970],["2015-06-12",'test',1745],["2015-06-13",'test',1079],["2015-06-14",'test',1087],["2015-06-15",'test',2221],["2015-06-16",'test',2176],["2015-06-17","Test ",1918],["2015-06-18",'test',1826],["2015-06-19",'test',1720],["2015-06-20",'test',937],["2015-06-21",'test',1094],["2015-06-22",'test',2170],["2015-06-23",'test',2085],["2015-06-24",'test',1952],["2015-06-25",'test',1865],["2015-06-26",'test',1674],["2015-06-27",'test',977],["2015-06-28",'test',1005],["2015-06-29",'test',2130],["2015-06-30",'test',1913],["2015-07-01",'test',1774],["2015-07-02",'test',1891],["2015-07-03",'test',1572],["2015-07-04",'test',979],["2015-07-05",'test',1024],["2015-07-06",'test',2163],["2015-07-07",'test',2041]]; 

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}


           var chart = new google.visualization.AreaChart(document.querySelector('#linechart_material'));

  google.visualization.events.addListener(chart, 'ready', function() {
      var rects = document.getElementById('linechart_material')
                  .querySelector('svg')
                  .querySelector('g:nth-of-type(2)')
                  .querySelector('g:nth-of-type(1)')
                  .querySelector('g:nth-of-type(4)')
                  .querySelectorAll('rect')
      for (var i=0;i<rects.length;i++) {
          rects[i].setAttribute('stroke', getRandomColor());
          rects[i].setAttribute('stroke-width', '5');     
      }     
  });    


            chart.draw(data, {
                width: 1600,
                height: 600,
                annotation: {
                    1: {
                        style: 'line',
                        color: 'black'
                    },
                    2:{
                        style: 'line',
                        color: 'blue'

                    }
                },
                vAxis: {
                    gridlines: {
                        color: 'none'
                    },
                    baselineColor: 'green'
                },
                hAxis: {
                    gridlines: {
                        color: 'none'
                    }
                },
                series: {
                    0: {color: '#e7711b'},
                    1: {color: '#e2431e'},
                    2: {color: '#f1ca3a'},
                    3: {color: '#6f9654'},
                    4: {color: '#1c91c0'},
                    5: {color: '#43459d'},
                }
            });


        }

google.load('visualization', '1', {packages: ['corechart'], callback: drawVisualization});

Please check js fiddle - http://jsfiddle.net/zcb9bk68/

Answer 1

Wee, as far I see it is for you to keep elements painted, and chart API has no idea how have you customized its styles. The only solution I can see here is to keep lines painted by your own, after each time chart API repaints it.

For this purpose you can use

onmouseout

and

onmouseover

events.

var updateElementColor = function(element){
              var color = element.getAttribute('my-color');
          if(!color){
              color = getRandomColor();
          }
          element.setAttribute('stroke', color);
          element.setAttribute('my-color', color);
          element.setAttribute('stroke-width', '5'); 
};

var updateColorsCallback = function() {
      var rects = document.getElementById('linechart_material')
                  .querySelector('svg')
                  .querySelector('g:nth-of-type(2)')
                  .querySelector('g:nth-of-type(1)')
                  .querySelector('g:nth-of-type(4)')
                  .querySelectorAll('rect')
      for (var i=0;i<rects.length;i++) {
          updateElementColor(rects[i]);
      }         
};
google.visualization.events.addListener(chart, 'ready', 
     updateColorsCallback 
);    
google.visualization.events.addListener(chart, 'onmouseout', 
     updateColorsCallback 
);  
google.visualization.events.addListener(chart, 'onmouseover', 
     updateColorsCallback 
);  

See this fiddle - http://jsfiddle.net/ckfh2yup/