{"action":"created","issue":{"url":"https://api.github.com/repos/uber/react-vis/issues/802","repository_url":"https://api.github.com/repos/uber/react-vis","labels_url":"https://api.github.com/repos/uber/react-vis/issues/802/labels{/name}","comments_url":"https://api.github.com/repos/uber/react-vis/issues/802/comments","events_url":"https://api.github.com/repos/uber/react-vis/issues/802/events","html_url":"https://github.com/uber/react-vis/issues/802","id":320952079,"number":802,"title":"Cant Use String as X-Axis Label","user":{"login":"RichmondAwanzam","id":5108437,"avatar_url":"https://avatars3.githubusercontent.com/u/5108437?v=4","gravatar_id":"","url":"https://api.github.com/users/RichmondAwanzam","html_url":"https://github.com/RichmondAwanzam","followers_url":"https://api.github.com/users/RichmondAwanzam/followers","following_url":"https://api.github.com/users/RichmondAwanzam/following{/other_user}","gists_url":"https://api.github.com/users/RichmondAwanzam/gists{/gist_id}","starred_url":"https://api.github.com/users/RichmondAwanzam/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/RichmondAwanzam/subscriptions","organizations_url":"https://api.github.com/users/RichmondAwanzam/orgs","repos_url":"https://api.github.com/users/RichmondAwanzam/repos","events_url":"https://api.github.com/users/RichmondAwanzam/events{/privacy}","received_events_url":"https://api.github.com/users/RichmondAwanzam/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-05-07T20:48:43Z","updated_at":"2018-05-11T04:15:22Z","closed_at":null,"author_association":"NONE","body":"I wanted to plot a line chart for date string items on x-axis, but the graph is not drawn.\r\nbelow is my component\r\n```jsx\r\n      <XAxis title=\"Days\" style={{\r\n          line: {stroke: '#ADDDE1'},\r\n          ticks: {stroke: '#ADDDE1'},\r\n          text: {stroke: 'none', fill: '#6b6b76', fontWeight: 600}\r\n        }}/>\r\n        <YAxis title=\"Number of Fruits\" />\r\n        <LineMarkSeries\r\n          className=\"linemark-series-example\"\r\n          style={{\r\n            stroke: 'white'\r\n          }}\r\n          data={[\r\n            {x: \"May 2\", y: 10},\r\n            {x: \"May 3\", y: 5},\r\n            {x: \"May 4\", y: 15}\r\n          ]}/>  \r\n</XYPlot>\r\n```"},"comment":{"url":"https://api.github.com/repos/uber/react-vis/issues/comments/388254953","html_url":"https://github.com/uber/react-vis/issues/802#issuecomment-388254953","issue_url":"https://api.github.com/repos/uber/react-vis/issues/802","id":388254953,"user":{"login":"mcnuttandrew","id":6854312,"avatar_url":"https://avatars1.githubusercontent.com/u/6854312?v=4","gravatar_id":"","url":"https://api.github.com/users/mcnuttandrew","html_url":"https://github.com/mcnuttandrew","followers_url":"https://api.github.com/users/mcnuttandrew/followers","following_url":"https://api.github.com/users/mcnuttandrew/following{/other_user}","gists_url":"https://api.github.com/users/mcnuttandrew/gists{/gist_id}","starred_url":"https://api.github.com/users/mcnuttandrew/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mcnuttandrew/subscriptions","organizations_url":"https://api.github.com/users/mcnuttandrew/orgs","repos_url":"https://api.github.com/users/mcnuttandrew/repos","events_url":"https://api.github.com/users/mcnuttandrew/events{/privacy}","received_events_url":"https://api.github.com/users/mcnuttandrew/received_events","type":"User","site_admin":false},"created_at":"2018-05-11T04:15:22Z","updated_at":"2018-05-11T04:15:22Z","author_association":"COLLABORATOR","body":"@RichmondAwanzam I think you could also check out xType=\"time\" if your data is time formatted. You could also modify your data to make it a little more time-y, like data.map(d => new Date(d)), and then set on the xAxis set the prop tickFormat as something like \r\n\r\n```javscript\r\ntickFormat={d => {\r\n    locale = \"en-us\",\r\n    month = d.toLocaleString(locale, { month: \"long\" });\r\n}}\r\n```\r\n\r\n(nb haven't tested that code in react-vis, but some rudimentary fiddling in dev console seems like it would be reasonable)"}}
{"actor":{"display_login":"mcnuttandrew"}}