{"action":"created","issue":{"url":"https://api.github.com/repos/RumbleInc/rumble-js-charts/issues/8","repository_url":"https://api.github.com/repos/RumbleInc/rumble-js-charts","labels_url":"https://api.github.com/repos/RumbleInc/rumble-js-charts/issues/8/labels{/name}","comments_url":"https://api.github.com/repos/RumbleInc/rumble-js-charts/issues/8/comments","events_url":"https://api.github.com/repos/RumbleInc/rumble-js-charts/issues/8/events","html_url":"https://github.com/RumbleInc/rumble-js-charts/issues/8","id":161170711,"number":8,"title":"onMouseMove handler weird behaviour when trying to make chart responsive","user":{"login":"kanedaki","id":565038,"avatar_url":"https://avatars.githubusercontent.com/u/565038?v=3","gravatar_id":"","url":"https://api.github.com/users/kanedaki","html_url":"https://github.com/kanedaki","followers_url":"https://api.github.com/users/kanedaki/followers","following_url":"https://api.github.com/users/kanedaki/following{/other_user}","gists_url":"https://api.github.com/users/kanedaki/gists{/gist_id}","starred_url":"https://api.github.com/users/kanedaki/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kanedaki/subscriptions","organizations_url":"https://api.github.com/users/kanedaki/orgs","repos_url":"https://api.github.com/users/kanedaki/repos","events_url":"https://api.github.com/users/kanedaki/events{/privacy}","received_events_url":"https://api.github.com/users/kanedaki/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2016-06-20T11:07:56Z","updated_at":"2016-06-20T11:09:27Z","closed_at":null,"body":"I've a bars / lines chart. I've added a Handler so when mouseMove over a bar I want  a Dot to appear over the line at the top of the bar.\r\n\r\nI've added a svg viewBox to make the chart responsive. The problem is when the size of the chart is not 300, the dot is displaced. When it is bigger the dot is displaced to the right and when the chart is smaller it gets displaced to the left.\r\n\r\nHere is the code:\r\n```\r\nimport React from 'react'\r\n// import { LineChart } from 'react-d3'\r\nimport { Chart, Lines, Layer, Ticks, Title, Dots, Handlers, Pies, Transform, Bars, DropShadow, Labels, Animate, Gradient, helpers, RadialLines } from 'rumble-charts'\r\n\r\nvar hovered = null;\r\n\r\n///HIDE HOVERED\r\n\r\nfunction hideHovered() {\r\n   if (hovered && hovered.circle) {\r\n     hovered.circle.setAttribute('r', hovered.radius);\r\n     hovered.circle.style.fillOpacity = hovered.opacity;\r\n     if (hovered.label) {\r\n       hovered.label.style.display = 'none';\r\n     }\r\n   }\r\n}\r\n\r\n///HANDLE MOUSE MOVE\r\n\r\nfunction handleMouseMove({closestPoints}) {\r\n  const closest = closestPoints[0];\r\n  if (!closest) {\r\n    return;\r\n  }\r\n  const {seriesIndex, pointIndex} = closest;\r\n  const circle = document.querySelector(`circle.dots-circle-${seriesIndex}-${pointIndex}`);\r\n  if (!circle) {\r\n    return;\r\n  }\r\n  hideHovered();\r\n  const label = document.querySelector(`.labels-label-${seriesIndex}-${pointIndex}`);\r\n  hovered = {circle, label, radius: circle.getAttribute('r'), opacity: circle.style.fillOpacity};\r\n  circle.setAttribute('r', 5);\r\n  circle.style.fillOpacity = 1;\r\n  if (label) {\r\n    label.style.display = 'block';\r\n  }\r\n}\r\n\r\n///HANDLE MOUSE LEAVE\r\n\r\nfunction handleMouseLeave() {\r\n  hideHovered();\r\n}\r\n\r\n///CONSTANTS\r\n\r\nconst months  = ['JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC', 'JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN']\r\n\r\n\r\n\r\n\r\nconst series3 = [{\r\n  data: [10, 11, 12, 13, 12, 12, 15, 16, 15, 17, 18, 20]\r\n}];\r\n\r\n\r\n///HOME\r\n\r\nfunction Home() {\r\n  return (\r\n    <div>\r\n      <h3>Home</h3>\r\n      <div className='g'>\r\n\r\n        <div className='gi one-third'>\r\n          <svg viewBox='0 0 300 300'>\r\n            <Chart width={300} height={300} series={series3} minY={0}>\r\n              <Layer width='100%' height='84%' position='middle center'>\r\n              <Handlers onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave} optimized={true}>\r\n                <Animate>\r\n                  <Bars\r\n                    colors={['#03a9f4']}\r\n                    groupPadding='1%'\r\n                    innerPadding='0%'\r\n                    barWidth='0%'\r\n                    barAttributes={{\r\n                      strokeLinejoin: 'round',\r\n                      strokeWidth: 21,\r\n                      stroke: '#f5f5f6'}}\r\n                    />\r\n                    <Lines\r\n                      lineWidth={0}\r\n                      interpolation='cardinal'\r\n                      seriesAttributes={{transform: 'translate(0 -12)', strokeLinejoin: 'round'}}\r\n                      lineAttributes={{\r\n                        strokeLinejoin: 'round',\r\n                        strokeWidth: 5,\r\n                        stroke:'#007696'\r\n                      }}\r\n                    />\r\n                    <Dots className='dots'\r\n                      colors={['#007696']}\r\n                      dotStyle={{transition:'all 250ms',fillOpacity:0}}\r\n                      seriesAttributes={{transform: 'translate(0 -13)'}}\r\n                    />\r\n                    <Ticks\r\n                      axis='x'\r\n                      ticks={({series}) => series[0].data.map((point, pointIndex) => ({\r\n                        x: point.x,\r\n                        label: months[pointIndex]\r\n                      }))}\r\n                      lineVisible={false}\r\n                      labelStyle={{textAnchor:'middle',dominantBaseline:'text-after-edge', fill:'#000', fontFamily: 'sans-serif', fontWeight: 'normal', fontSize: 10}}\r\n                      labelAttributes={{y: '2.5em'}}\r\n                    />\r\n                  </Animate>\r\n                </Handlers>\r\n              </Layer>\r\n            </Chart>\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default Home\r\n```"},"comment":{"url":"https://api.github.com/repos/RumbleInc/rumble-js-charts/issues/comments/227113942","html_url":"https://github.com/RumbleInc/rumble-js-charts/issues/8#issuecomment-227113942","issue_url":"https://api.github.com/repos/RumbleInc/rumble-js-charts/issues/8","id":227113942,"user":{"login":"kanedaki","id":565038,"avatar_url":"https://avatars.githubusercontent.com/u/565038?v=3","gravatar_id":"","url":"https://api.github.com/users/kanedaki","html_url":"https://github.com/kanedaki","followers_url":"https://api.github.com/users/kanedaki/followers","following_url":"https://api.github.com/users/kanedaki/following{/other_user}","gists_url":"https://api.github.com/users/kanedaki/gists{/gist_id}","starred_url":"https://api.github.com/users/kanedaki/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kanedaki/subscriptions","organizations_url":"https://api.github.com/users/kanedaki/orgs","repos_url":"https://api.github.com/users/kanedaki/repos","events_url":"https://api.github.com/users/kanedaki/events{/privacy}","received_events_url":"https://api.github.com/users/kanedaki/received_events","type":"User","site_admin":false},"created_at":"2016-06-20T11:09:27Z","updated_at":"2016-06-20T11:09:27Z","body":"In both cases, mouse was over March.\r\n\r\nIn this case the width was bigger than 300:\r\n<img width=\"390\" alt=\"big\" src=\"https://cloud.githubusercontent.com/assets/565038/16192178/1362f538-36e8-11e6-9c7d-041944d0dee4.png\">\r\n\r\nIn this case the width was smaller than 300:\r\n<img width=\"266\" alt=\"small\" src=\"https://cloud.githubusercontent.com/assets/565038/16192179/1367ce96-36e8-11e6-8d16-59e063b3b01f.png\">\r\n"}}
{"actor":{"display_login":"kanedaki"}}