Add tooltip on legend labels

• July 19, 2017 at 10:46 pm #15598
  
  Anthony

  Is there any ability to provide a tooltip on hover over a series label in the legend? Since the label itself is drawn on the canvas and is not an html element we can’t just set the ‘title’ attribute. Looks like there are some events that could be used to simulate it though:

  itemmouseover
  itemmouseout

  Any tips on how that might work? Set title of canvas on itemmouseover and clear it on itemmouseout?

  July 20, 2017 at 1:29 am #15599
  
  Anthony

  The following works for adding tooltip:

                  itemmouseover: function (e) {
                      $(e.chart._canvasJSContainer).attr("title", "My custom toolip");
                      console.log('mouseover');
                      e.chart.legend.fontColor = 'orange';
                      e.chart.legend.backgroundColor = 'blue';
                      e.chart.legend.borderColor = 'red';
                      e.chart.legend.borderThickness = 3;
                      e.chart.legend.fontStyle = 'italic';
                      e.chart.legend.fontWeight = 'bold';
                      e.chart.render();
                  },
                  itemmouseout: function (e) {
                      $(e.chart._canvasJSContainer).removeAttr("title");                    
                      console.log('mouseout');
                      e.chart.legend.fontColor = 'black';
                      e.chart.legend.backgroundColor = 'transparent';
                      e.chart.legend.borderColor = 'transparent';
                      e.chart.legend.borderThickness = 0;
                      e.chart.legend.fontStyle = 'normal';
                      e.chart.legend.fontWeight = 'normal'; 
                      e.chart.render();
                  }
  

  But, doesn’t work for changing the color/style/border/whatever of the series label. Any tips on how to get that to work?

  • This reply was modified 7 years, 4 months ago by Anthony.
  July 20, 2017 at 1:38 am #15601
  
  Anthony

  Figured it out. Gotta use setter methods:

  
                  itemmouseover: function (e) {
                      $(e.chart._canvasJSContainer).attr("title", "My custom tooltip");
                      console.log('mouseover');
                      e.chart.legend.set("fontColor", 'orange');
                      e.chart.legend.set("backgroundColor", 'blue');
                      e.chart.legend.set("borderColor", 'red');
                      e.chart.legend.set("borderThickness", 3);
                      e.chart.legend.set("fontStyle", 'italic');
                      e.chart.legend.set("fontWeight", 'bold');
                      e.chart.render();
                  },
                  itemmouseout: function (e) {
                      $(e.chart._canvasJSContainer).removeAttr("title");                    
                      console.log('mouseout');
                      e.chart.legend.set("fontColor", 'black');
                      e.chart.legend.set("backgroundColor", 'transparent');
                      e.chart.legend.set("borderColor", 'transparent');
                      e.chart.legend.set("borderThickness", 0);
                      e.chart.legend.set("fontStyle", 'normal');
                      e.chart.legend.set("fontWeight", 'normal'); 
                      e.chart.render();
                  }
  

  July 20, 2017 at 1:44 am #15602
  
  Anthony

  This is unusable performance-wise with large charts though. Is there a way to trigger just the legend to re-render. Drawing the entire unchanged graph over again takes way too long.

  July 20, 2017 at 11:56 am #15608
  
  Bivek Singh

  Anthony,

  By default, chart will render each time on calling set method. You need to pass false as third parameter in the set method which would prevent the re-render of chart and set it to true on last call to set method which might improve the performance as there won’t be repeated chart rendering.

  

  Bivek Singh,
  Team CanvasJS