{"action":"created","issue":{"url":"https://api.github.com/repos/whawker/react-jsx-highcharts/issues/160","repository_url":"https://api.github.com/repos/whawker/react-jsx-highcharts","labels_url":"https://api.github.com/repos/whawker/react-jsx-highcharts/issues/160/labels{/name}","comments_url":"https://api.github.com/repos/whawker/react-jsx-highcharts/issues/160/comments","events_url":"https://api.github.com/repos/whawker/react-jsx-highcharts/issues/160/events","html_url":"https://github.com/whawker/react-jsx-highcharts/issues/160","id":365606976,"node_id":"MDU6SXNzdWUzNjU2MDY5NzY=","number":160,"title":"Slow Performance with large data sets","user":{"login":"JPNZ4","id":17604706,"node_id":"MDQ6VXNlcjE3NjA0NzA2","avatar_url":"https://avatars3.githubusercontent.com/u/17604706?v=4","gravatar_id":"","url":"https://api.github.com/users/JPNZ4","html_url":"https://github.com/JPNZ4","followers_url":"https://api.github.com/users/JPNZ4/followers","following_url":"https://api.github.com/users/JPNZ4/following{/other_user}","gists_url":"https://api.github.com/users/JPNZ4/gists{/gist_id}","starred_url":"https://api.github.com/users/JPNZ4/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/JPNZ4/subscriptions","organizations_url":"https://api.github.com/users/JPNZ4/orgs","repos_url":"https://api.github.com/users/JPNZ4/repos","events_url":"https://api.github.com/users/JPNZ4/events{/privacy}","received_events_url":"https://api.github.com/users/JPNZ4/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-10-01T19:25:38Z","updated_at":"2018-10-01T19:46:15Z","closed_at":"2018-10-01T19:46:15Z","author_association":"NONE","body":"#### Description\r\nI'm testing react-jsx-highcharts in my application with some fairly large data sets. Once I reach 5000-10,000 data points per graph my performance starts to deteriorate quickly, it will work up to around 100,000 data points but extremely slowly. I have re-created the same scenario is vanilla JS and it works with no performance issue.\r\n\r\nTo test the performance I'm moving my mouse around the graph with the tooltip on, as it gets slower the tooltip fails to keep up with the mouse and then around 50,000 data point and upwards it may take up to 5 seconds to render the tooltip.\r\n\r\nAfter running some performance tests in chrome dev tools, I noticed that the more data points I add the longer the painting takes. When I dive deeper, its the composite layers that are taking up the most time in the performance tools. Screenshot attached below, this in one graph with 50,000 data points and I'm just moving the mouse around the graph.\r\n\r\n![50k highcharts graph](https://user-images.githubusercontent.com/17604706/46310395-b2bdcd00-c61b-11e8-93c4-4778ca128710.PNG)\r\n\r\nIn comparison to a Vanilla JS application with three of the same graph with 1 million data points each.\r\n\r\n![vanillajs 3x 1mill graphs](https://user-images.githubusercontent.com/17604706/46310566-37a8e680-c61c-11e8-9c3f-5562ce06a9e5.PNG)\r\n\r\nThe vanillaJS application is the same as this https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-boost/ and the react-jsx-highcharts is the same as the front page demo but adding larger datasets.\r\n\r\nIs there anything I can do to improve the performance of this library or would this possibly be a react issue?\r\n\r\n#### Versions\r\n* React JSX Highcharts version: 3.2.1\r\n* Highcharts version: 6.1.4\r\n* React version: 16.5.1\r\n"},"comment":{"url":"https://api.github.com/repos/whawker/react-jsx-highcharts/issues/comments/426038159","html_url":"https://github.com/whawker/react-jsx-highcharts/issues/160#issuecomment-426038159","issue_url":"https://api.github.com/repos/whawker/react-jsx-highcharts/issues/160","id":426038159,"node_id":"MDEyOklzc3VlQ29tbWVudDQyNjAzODE1OQ==","user":{"login":"JPNZ4","id":17604706,"node_id":"MDQ6VXNlcjE3NjA0NzA2","avatar_url":"https://avatars3.githubusercontent.com/u/17604706?v=4","gravatar_id":"","url":"https://api.github.com/users/JPNZ4","html_url":"https://github.com/JPNZ4","followers_url":"https://api.github.com/users/JPNZ4/followers","following_url":"https://api.github.com/users/JPNZ4/following{/other_user}","gists_url":"https://api.github.com/users/JPNZ4/gists{/gist_id}","starred_url":"https://api.github.com/users/JPNZ4/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/JPNZ4/subscriptions","organizations_url":"https://api.github.com/users/JPNZ4/orgs","repos_url":"https://api.github.com/users/JPNZ4/repos","events_url":"https://api.github.com/users/JPNZ4/events{/privacy}","received_events_url":"https://api.github.com/users/JPNZ4/received_events","type":"User","site_admin":false},"created_at":"2018-10-01T19:46:15Z","updated_at":"2018-10-01T19:46:15Z","author_association":"NONE","body":"Ah, sorry, I though I had done so, but no. That has fixed the problem and now gives similar results to the vanilla JS example. Thanks @whawker ."}}
{"actor":{"display_login":"JPNZ4"}}