{"action":"created","issue":{"url":"https://api.github.com/repos/chartjs/Chart.js/issues/3463","repository_url":"https://api.github.com/repos/chartjs/Chart.js","labels_url":"https://api.github.com/repos/chartjs/Chart.js/issues/3463/labels{/name}","comments_url":"https://api.github.com/repos/chartjs/Chart.js/issues/3463/comments","events_url":"https://api.github.com/repos/chartjs/Chart.js/issues/3463/events","html_url":"https://github.com/chartjs/Chart.js/issues/3463","id":182543630,"number":3463,"title":"Browser refresh on canvas creation","user":{"login":"stianlp","id":1025824,"avatar_url":"https://avatars.githubusercontent.com/u/1025824?v=3","gravatar_id":"","url":"https://api.github.com/users/stianlp","html_url":"https://github.com/stianlp","followers_url":"https://api.github.com/users/stianlp/followers","following_url":"https://api.github.com/users/stianlp/following{/other_user}","gists_url":"https://api.github.com/users/stianlp/gists{/gist_id}","starred_url":"https://api.github.com/users/stianlp/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/stianlp/subscriptions","organizations_url":"https://api.github.com/users/stianlp/orgs","repos_url":"https://api.github.com/users/stianlp/repos","events_url":"https://api.github.com/users/stianlp/events{/privacy}","received_events_url":"https://api.github.com/users/stianlp/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/chartjs/Chart.js/labels/Category:%20Support","name":"Category: Support","color":"f9d0c4"}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2016-10-12T14:40:02Z","updated_at":"2016-10-12T15:31:35Z","closed_at":null,"body":"I am using chartjs with react, and when i create the chart it *looks* like the browser is refreshing.\r\n\r\nThe props are ready when the line chart component mounts, which means that there is no need to update the data or call .update(). So the problem is **not related to re-creating charts, should have destroyed the chart, etc ...**\r\n\r\nSo this is what happens:\r\n\r\nThe render function only render the canvas:\r\n\r\n` <canvas id={this.id} ref=\"myChart\" width=\"200\" height=\"100\"></canvas>\r\n`\r\n\r\nWhen the component mounts:\r\n\r\n`componentDidMount() {\r\n  this.chart = new Chart(this.refs.myChart, {/* options here */})\r\n}`\r\n\r\nAnd now, when the canvas is created it looks like the browser is being refreshed. Obviously, it's not actually being refreshed (because the react state is not reset or anything), but it just looks like it. And, even though that may not be much of a problem if the state is maintained and everything, it looks buggy in the browser.\r\n\r\nI am not sure if this i a bug or not, but there is something weird going on with my browser(s) (Chrome, Safari, Firefox) when creating charts. When creating a vanilla canvas like the one below, I don't experience this buggy behavior.\r\n\r\n`        var c = document.getElementById(\"myCanvas\");\r\n        var ctx = c.getContext(\"2d\");\r\n        ctx.moveTo(0, 0);\r\n        ctx.lineTo(200, 100);\r\n        ctx.stroke();\r\n`\r\n\r\nAnd yes, that one is also created in reacts componentDidMount function.\r\n\r\nBecause I can get this stuff to work with a plain canvas, and it appears to be buggy, I hope this post is accepted here, because it is probably more of a chart.js issue than a React/browser issue.\r\n"},"comment":{"url":"https://api.github.com/repos/chartjs/Chart.js/issues/comments/253248052","html_url":"https://github.com/chartjs/Chart.js/issues/3463#issuecomment-253248052","issue_url":"https://api.github.com/repos/chartjs/Chart.js/issues/3463","id":253248052,"user":{"login":"stianlp","id":1025824,"avatar_url":"https://avatars.githubusercontent.com/u/1025824?v=3","gravatar_id":"","url":"https://api.github.com/users/stianlp","html_url":"https://github.com/stianlp","followers_url":"https://api.github.com/users/stianlp/followers","following_url":"https://api.github.com/users/stianlp/following{/other_user}","gists_url":"https://api.github.com/users/stianlp/gists{/gist_id}","starred_url":"https://api.github.com/users/stianlp/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/stianlp/subscriptions","organizations_url":"https://api.github.com/users/stianlp/orgs","repos_url":"https://api.github.com/users/stianlp/repos","events_url":"https://api.github.com/users/stianlp/events{/privacy}","received_events_url":"https://api.github.com/users/stianlp/received_events","type":"User","site_admin":false},"created_at":"2016-10-12T15:31:35Z","updated_at":"2016-10-12T15:31:35Z","body":"I added a background color to the button when it is showing the charts. Also added a few more charts, so it hopefully will spend a few more ms creating all chart.\r\n\r\nWhat happens when the browser *\"refresh\"* is that it takes a while before the button turns red. This is what I refer to as buggy behavior."}}
{"actor":{"display_login":"stianlp"}}