{"action":"created","issue":{"url":"https://api.github.com/repos/uber/react-vis/issues/67","repository_url":"https://api.github.com/repos/uber/react-vis","labels_url":"https://api.github.com/repos/uber/react-vis/issues/67/labels{/name}","comments_url":"https://api.github.com/repos/uber/react-vis/issues/67/comments","events_url":"https://api.github.com/repos/uber/react-vis/issues/67/events","html_url":"https://github.com/uber/react-vis/issues/67","id":151288791,"number":67,"title":"Add ability to customize bar width on bar series","user":{"login":"chrisirhc","id":132584,"avatar_url":"https://avatars3.githubusercontent.com/u/132584?v=4","gravatar_id":"","url":"https://api.github.com/users/chrisirhc","html_url":"https://github.com/chrisirhc","followers_url":"https://api.github.com/users/chrisirhc/followers","following_url":"https://api.github.com/users/chrisirhc/following{/other_user}","gists_url":"https://api.github.com/users/chrisirhc/gists{/gist_id}","starred_url":"https://api.github.com/users/chrisirhc/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chrisirhc/subscriptions","organizations_url":"https://api.github.com/users/chrisirhc/orgs","repos_url":"https://api.github.com/users/chrisirhc/repos","events_url":"https://api.github.com/users/chrisirhc/events{/privacy}","received_events_url":"https://api.github.com/users/chrisirhc/received_events","type":"User","site_admin":false},"labels":[{"id":330267854,"url":"https://api.github.com/repos/uber/react-vis/labels/enhancement","name":"enhancement","color":"0052cc","default":true}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":{"url":"https://api.github.com/repos/uber/react-vis/milestones/2","html_url":"https://github.com/uber/react-vis/milestone/2","labels_url":"https://api.github.com/repos/uber/react-vis/milestones/2/labels","id":1714434,"number":2,"title":"1.0","description":"","creator":{"login":"chrisirhc","id":132584,"avatar_url":"https://avatars3.githubusercontent.com/u/132584?v=4","gravatar_id":"","url":"https://api.github.com/users/chrisirhc","html_url":"https://github.com/chrisirhc","followers_url":"https://api.github.com/users/chrisirhc/followers","following_url":"https://api.github.com/users/chrisirhc/following{/other_user}","gists_url":"https://api.github.com/users/chrisirhc/gists{/gist_id}","starred_url":"https://api.github.com/users/chrisirhc/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chrisirhc/subscriptions","organizations_url":"https://api.github.com/users/chrisirhc/orgs","repos_url":"https://api.github.com/users/chrisirhc/repos","events_url":"https://api.github.com/users/chrisirhc/events{/privacy}","received_events_url":"https://api.github.com/users/chrisirhc/received_events","type":"User","site_admin":false},"open_issues":1,"closed_issues":4,"state":"open","created_at":"2016-04-18T17:45:59Z","updated_at":"2017-03-20T04:53:25Z","due_on":null,"closed_at":null},"comments":7,"created_at":"2016-04-27T03:05:48Z","updated_at":"2018-05-17T08:54:00Z","closed_at":"2017-01-18T07:24:04Z","author_association":"CONTRIBUTOR","body":"Right now, the bar widths are automatically calculated, but there's no way to override it.\n\nThis is particularly useful for histograms.\n\n![image](https://cloud.githubusercontent.com/assets/132584/14840593/5c887040-0bea-11e6-8a66-613b036b74d1.png)\n"},"comment":{"url":"https://api.github.com/repos/uber/react-vis/issues/comments/389794659","html_url":"https://github.com/uber/react-vis/issues/67#issuecomment-389794659","issue_url":"https://api.github.com/repos/uber/react-vis/issues/67","id":389794659,"user":{"login":"sprzedwojski","id":4280682,"avatar_url":"https://avatars3.githubusercontent.com/u/4280682?v=4","gravatar_id":"","url":"https://api.github.com/users/sprzedwojski","html_url":"https://github.com/sprzedwojski","followers_url":"https://api.github.com/users/sprzedwojski/followers","following_url":"https://api.github.com/users/sprzedwojski/following{/other_user}","gists_url":"https://api.github.com/users/sprzedwojski/gists{/gist_id}","starred_url":"https://api.github.com/users/sprzedwojski/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sprzedwojski/subscriptions","organizations_url":"https://api.github.com/users/sprzedwojski/orgs","repos_url":"https://api.github.com/users/sprzedwojski/repos","events_url":"https://api.github.com/users/sprzedwojski/events{/privacy}","received_events_url":"https://api.github.com/users/sprzedwojski/received_events","type":"User","site_admin":false},"created_at":"2018-05-17T08:54:00Z","updated_at":"2018-05-17T08:54:00Z","author_association":"NONE","body":"I managed to \"hack\" the rect-series to draw a vertical bar chart with strings as x-axis labels.\r\nBelow is my example code, maybe it helps somebody:\r\n\r\n`const values = [\r\n  {\"y\": 0.9},\r\n  {\"y\": 0.3},\r\n  {\"y\": 0.5}\r\n]\r\n\r\nconst labels = [\r\n  'Label 1',\r\n  'Label 2',\r\n  'Label 3'\r\n]\r\n\r\nclass BarChartCustomBarWidth extends React.Component {\r\n  \r\n  // by tweaking this value you can resize the columns\r\n  // 1 - columns touch each other\r\n  // 0 - columns are invisible\r\n  columnWidth = 0.5\r\n  \r\n  transformDataToRectSeries(raw) {\r\n    const transformed = raw.map((el, i) => {\r\n      el.x0 = (i + 1) - this.columnWidth / 2\r\n      el.x = (i + 1) + this.columnWidth / 2\r\n      return el\r\n    })\r\n    transformed.unshift({x: 0.5, y: 0}) // fake data point, enables margin between y-axis and first column\r\n    transformed.push({x: 3.5, y: 0}) // fake data point, enables margin between last column and chart end\r\n    return transformed\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <XYPlot width={500} height={400}>\r\n        <XAxis\r\n          tickFormat={(v,i) => labels[i]}\r\n          tickValues={[1, 2, 3]}\r\n          />\r\n        <YAxis/>\r\n        <VerticalRectSeries\r\n          data={this.transformDataToRectSeries(values)}\r\n          />  \r\n      </XYPlot>\r\n    )\r\n  }\r\n}\r\n\r\nReactDOM.render(<BarChartCustomBarWidth />, document.getElementById('app'));`\r\n\r\nhttps://codepen.io/quickbrownfox/pen/xjyeam"}}
{"actor":{"display_login":"sprzedwojski"}}