{"action":"created","issue":{"url":"https://api.github.com/repos/nnnick/Chart.js/issues/1276","labels_url":"https://api.github.com/repos/nnnick/Chart.js/issues/1276/labels{/name}","comments_url":"https://api.github.com/repos/nnnick/Chart.js/issues/1276/comments","events_url":"https://api.github.com/repos/nnnick/Chart.js/issues/1276/events","html_url":"https://github.com/nnnick/Chart.js/issues/1276","id":92851221,"number":1276,"title":"Mouseout is not working","user":{"login":"iarcas","id":4882431,"avatar_url":"https://avatars.githubusercontent.com/u/4882431?v=3","gravatar_id":"","url":"https://api.github.com/users/iarcas","html_url":"https://github.com/iarcas","followers_url":"https://api.github.com/users/iarcas/followers","following_url":"https://api.github.com/users/iarcas/following{/other_user}","gists_url":"https://api.github.com/users/iarcas/gists{/gist_id}","starred_url":"https://api.github.com/users/iarcas/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/iarcas/subscriptions","organizations_url":"https://api.github.com/users/iarcas/orgs","repos_url":"https://api.github.com/users/iarcas/repos","events_url":"https://api.github.com/users/iarcas/events{/privacy}","received_events_url":"https://api.github.com/users/iarcas/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/nnnick/Chart.js/labels/v1.x","name":"v1.x","color":"fbca04"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-07-03T10:59:44Z","updated_at":"2015-12-25T18:26:11Z","closed_at":"2015-12-25T18:26:11Z","body":"Hello everybody!\r\n\r\nI'm creating a graphic with a Doughnut chart that when hover, instead of showing the tooltip info I would like to show other content different from the \"value\" with animations and outside the graph. The problem is that when I disable the tooltip func, then the Hover function disappears also.\r\n\r\nSo I managed to generate manually the \"hover\" state (using mousemove) but I couldn't work out how to place again the original color when the mouse is not over. MouseOut doesn't work.... Any ideas?\r\n\r\nThanks in advance!\r\n\r\nHere is my code:\r\n\r\n\tfunction drawChartD(){\r\n\t\tvar canvas = document.getElementById(\"chart-area\");\r\n        var ctx = canvas.getContext(\"2d\");\r\n\t\twindow.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {\r\n\r\n\t\t\tresponsive : true,\r\n\r\n\t\t\t    //Boolean - Whether we should show a stroke on each segment\r\n\t\t\t    segmentShowStroke : true,\r\n\r\n\t\t\t    //String - The colour of each segment stroke\r\n\t\t\t    segmentStrokeColor : \"#ce0058\",\r\n\r\n\t\t\t    //Number - The width of each segment stroke\r\n\t\t\t    segmentStrokeWidth : 5,\r\n\r\n\t\t\t    //Number - The percentage of the chart that we cut out of the middle\r\n\t\t\t    percentageInnerCutout : 85, // This is 0 for Pie charts\r\n\r\n\t\t\t    //Number - Amount of animation steps\r\n\t\t\t    animationSteps : 100,\r\n\r\n\t\t\t    //String - Animation easing effect\r\n\t\t\t    animationEasing : \"easeOut\",\r\n\r\n\t\t\t    // Array - Array of string names to attach tooltip events\r\n\t\t\t\ttooltipEvents: [\"mousemove\", \"touchstart\", \"touchmove\", \"mouseout\"],\r\n\r\n\t\t\t    //Boolean - Whether we animate the rotation of the Doughnut\r\n\t\t\t    animateRotate : true,\r\n\r\n\t\t\t    showTooltips: false,\r\n\r\n\t\t\t    //Boolean - Whether we animate scaling the Doughnut from the centre\r\n\t\t\t    animateScale : false\r\n\r\n\t\t\t});\r\n\r\n\r\n\t\t\tcanvas.onmousemove = function(evt){\r\n               var segmentsInRange = myDoughnut.getSegmentsAtEvent(evt);\r\n                segmentsInRange.forEach(function(segment){\r\n                    console.log(segment.label);\r\n                               \r\n                    segment.fillColor = \"#00677f\"; \r\n\t\t\t\t\t\r\n                });\r\n\r\n                myDoughnut.update();\r\n   \r\n            };\r\n\r\n\t};"},"comment":{"url":"https://api.github.com/repos/nnnick/Chart.js/issues/comments/167256437","html_url":"https://github.com/nnnick/Chart.js/issues/1276#issuecomment-167256437","issue_url":"https://api.github.com/repos/nnnick/Chart.js/issues/1276","id":167256437,"user":{"login":"etimberg","id":6757853,"avatar_url":"https://avatars.githubusercontent.com/u/6757853?v=3","gravatar_id":"","url":"https://api.github.com/users/etimberg","html_url":"https://github.com/etimberg","followers_url":"https://api.github.com/users/etimberg/followers","following_url":"https://api.github.com/users/etimberg/following{/other_user}","gists_url":"https://api.github.com/users/etimberg/gists{/gist_id}","starred_url":"https://api.github.com/users/etimberg/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/etimberg/subscriptions","organizations_url":"https://api.github.com/users/etimberg/orgs","repos_url":"https://api.github.com/users/etimberg/repos","events_url":"https://api.github.com/users/etimberg/events{/privacy}","received_events_url":"https://api.github.com/users/etimberg/received_events","type":"User","site_admin":false},"created_at":"2015-12-25T18:26:11Z","updated_at":"2015-12-25T18:26:11Z","body":"The best way to do this would be to track the active elements and then when the active list changes, remove the hover style from the old elements before changing the new elements.\r\n\r\nIn v2 this is has been supported via separating the hover style from the tooltip display so that both can be individually controller."}}