{"action":"created","issue":{"url":"https://api.github.com/repos/FormidableLabs/victory-native/issues/120","repository_url":"https://api.github.com/repos/FormidableLabs/victory-native","labels_url":"https://api.github.com/repos/FormidableLabs/victory-native/issues/120/labels{/name}","comments_url":"https://api.github.com/repos/FormidableLabs/victory-native/issues/120/comments","events_url":"https://api.github.com/repos/FormidableLabs/victory-native/issues/120/events","html_url":"https://github.com/FormidableLabs/victory-native/issues/120","id":242638303,"node_id":"MDU6SXNzdWUyNDI2MzgzMDM=","number":120,"title":"Drag too slow(lags) on VictoryVoronoiContainer with big dataset","user":{"login":"jinxac","id":15068096,"node_id":"MDQ6VXNlcjE1MDY4MDk2","avatar_url":"https://avatars2.githubusercontent.com/u/15068096?v=4","gravatar_id":"","url":"https://api.github.com/users/jinxac","html_url":"https://github.com/jinxac","followers_url":"https://api.github.com/users/jinxac/followers","following_url":"https://api.github.com/users/jinxac/following{/other_user}","gists_url":"https://api.github.com/users/jinxac/gists{/gist_id}","starred_url":"https://api.github.com/users/jinxac/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jinxac/subscriptions","organizations_url":"https://api.github.com/users/jinxac/orgs","repos_url":"https://api.github.com/users/jinxac/repos","events_url":"https://api.github.com/users/jinxac/events{/privacy}","received_events_url":"https://api.github.com/users/jinxac/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":29,"created_at":"2017-07-13T09:22:54Z","updated_at":"2018-06-07T07:55:42Z","closed_at":null,"author_association":"NONE","body":"I was trying to implement a chart  and I wanted to activate the current active point by show showing a marker and a crosshair by using label component. Something like ![image uploaded from ios](https://user-images.githubusercontent.com/15068096/28125380-13c5ccd4-6744-11e7-8fb5-92715407a89e.jpg)\r\n\r\ni was able to achieve this using following code:-\r\n\r\n```\r\nimport {VictoryLine,VictoryVoronoiContainer,VictoryGroup,Point} from \"victory-native\";\r\nimport React from \"react\";\r\nimport {G,Line} from \"react-native-svg\";\r\nimport {View,Text} from \"react-native\";\r\n\r\nclass ChartPoint extends React.Component {\r\n  state = {\r\n\r\n  };\r\n\r\n  render () {\r\n    const {\r\n      x,\r\n      y,\r\n      datum,\r\n      activeX\r\n    } = this.props;\r\n    let size = 0;\r\n    let lineContent = null;\r\n    if (datum.x === activeX) {\r\n      size = 10;\r\n      lineContent = (\r\n        <Line\r\n          stroke=\"grey\"\r\n          strokeWidth=\"1\"\r\n          x1={x}\r\n          x2={x}\r\n          y1={y-200}\r\n          y2={y+200}\r\n        />\r\n      );\r\n    }\r\n    return (\r\n      <G>\r\n        {lineContent}\r\n        <Point\r\n          datum={datum}\r\n          size={size}\r\n          symbol={\"circle\"}\r\n          x={x}\r\n          y={y}\r\n        />\r\n      </G>\r\n    );\r\n  }\r\n}\r\n\r\n\r\nexport default class CustomDataComponent extends React.Component {\r\n  state = {\r\n    \"x\": 1\r\n  };\r\n\r\n  setActiveIndex = (points)  => {\r\n    this.setState({\"x\": points[1].x});\r\n  }\r\n\r\n  render () {\r\n    return (\r\n      <View style={{\"flex\":1}}>\r\n        <View style={{\"marginVertical\":20,\"alignItems\": \"center\",\"flex\":0.2}}>\r\n          <Text style={{\"fontSize\": 14}}>Date</Text>\r\n          <Text style={{\"fontSize\": 16}}>{this.state.x}</Text>\r\n        </View>\r\n        <View style={{\"flex\":1}}>\r\n          <VictoryGroup\r\n            containerComponent={<VictoryVoronoiContainer\r\n             labels={(d) => (d.y)}\r\n             labelComponent={<ChartPoint />}\r\n            />}\r\n            data={[\r\n              {\"x\": 1, \"y\": 2},\r\n              {\"x\": 2, \"y\": 3},\r\n              {\"x\": 3, \"y\": 5},\r\n              {\"x\": 4, \"y\": 4},\r\n              {\"x\": 5, \"y\": 7},\r\n              {\"x\": 6, \"y\": 8}\r\n            ]}\r\n          >\r\n            <VictoryLine\r\n              style={{\r\n                \"data\": {\"stroke\": \"#c43a31\"},\r\n                \"parent\": {\"border\": \"1px solid #ccc\"}\r\n              }}\r\n            />\r\n          </VictoryGroup>\r\n        </View>\r\n      </View>\r\n\r\n    );\r\n  }\r\n}\r\n\r\nChartPoint.propTypes = {\r\n  \"activeX\": React.PropTypes.number.isRequired,\r\n  \"datum\": React.PropTypes.object.isRequired,\r\n  \"x\": React.PropTypes.number.isRequired,\r\n  \"y\": React.PropTypes.number.isRequired\r\n};\r\n```\r\n\r\nNow this works fine if number of points are less. But if number of points increase say > 200 the mouseTouch event really lags. It takes lot of time to scroll to current point. Attaching a sample video\r\n![ezgif com-video-to-gif](https://user-images.githubusercontent.com/15068096/28159522-d5534e76-67da-11e7-9956-706fd105fed7.gif)\r\n\r\nCan someone please help me on this?\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/FormidableLabs/victory-native/issues/comments/395328125","html_url":"https://github.com/FormidableLabs/victory-native/issues/120#issuecomment-395328125","issue_url":"https://api.github.com/repos/FormidableLabs/victory-native/issues/120","id":395328125,"node_id":"MDEyOklzc3VlQ29tbWVudDM5NTMyODEyNQ==","user":{"login":"karaoak","id":1611588,"node_id":"MDQ6VXNlcjE2MTE1ODg=","avatar_url":"https://avatars2.githubusercontent.com/u/1611588?v=4","gravatar_id":"","url":"https://api.github.com/users/karaoak","html_url":"https://github.com/karaoak","followers_url":"https://api.github.com/users/karaoak/followers","following_url":"https://api.github.com/users/karaoak/following{/other_user}","gists_url":"https://api.github.com/users/karaoak/gists{/gist_id}","starred_url":"https://api.github.com/users/karaoak/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/karaoak/subscriptions","organizations_url":"https://api.github.com/users/karaoak/orgs","repos_url":"https://api.github.com/users/karaoak/repos","events_url":"https://api.github.com/users/karaoak/events{/privacy}","received_events_url":"https://api.github.com/users/karaoak/received_events","type":"User","site_admin":false},"created_at":"2018-06-07T07:55:42Z","updated_at":"2018-06-07T07:55:42Z","author_association":"NONE","body":"@boygirl Thank you for your quick answer and suggestion. I just tested. Unfortunately removing the VictoryGroup does not result in a better performance 😥\r\nWith less Line components, performance is very good.\r\nI think of investigating to only onTouchMove add an eventHandler and draw the vertical cursor line outside of my VictoryChart component.\r\nWould that be a good direction to investigate upon? "}}
{"actor":{"display_login":"karaoak"}}