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.

enter image description here 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/

score 1 · Accepted Answer · answered Jul 20 '15 at 07:44

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/

@SashantPardeshi, not sure that there is a build-in way to do it, since it is a main purpose of annotations to show some text. In order to do it you should probably find another way of drawing such a chart. — Ivan, Jul 20 '15 at 08:22
@SashantPardeshi, well, to be honest you COULD use the very same approach as you have already used in case of painting lines... I mean I could manually remove all annotation elements from DOM, but this is not related to this question... please, mark question as answered if it is helpful — Ivan, Jul 20 '15 at 09:52

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

1 Answers1