Home forums Feature Requests & Feedback Add tooltip on legend labels

This topic contains 4 replies, has 2 voices, and was last updated by  Bivek Singh 4 months, 4 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #15598

    Anthony
    Member

    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?

    #15599

    Anthony
    Member

    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 4 months, 4 weeks ago by  Anthony.
    #15601

    Anthony
    Member

    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();
                    }
    
    #15602

    Anthony
    Member

    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.

    #15608

    Bivek Singh
    Moderator

    Anthony,

    You need to pass false as third parameter in the set method which would prevent the re-render of chart. The third parameter defaults to true.

    Bivek Singh,
    Team CanvasJS

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.