{"action":"created","issue":{"url":"https://api.github.com/repos/gionkunz/chartist-js/issues/482","labels_url":"https://api.github.com/repos/gionkunz/chartist-js/issues/482/labels{/name}","comments_url":"https://api.github.com/repos/gionkunz/chartist-js/issues/482/comments","events_url":"https://api.github.com/repos/gionkunz/chartist-js/issues/482/events","html_url":"https://github.com/gionkunz/chartist-js/issues/482","id":110900848,"number":482,"title":"Styling scatter chart dots","user":{"login":"Puffton","id":12534742,"avatar_url":"https://avatars.githubusercontent.com/u/12534742?v=3","gravatar_id":"","url":"https://api.github.com/users/Puffton","html_url":"https://github.com/Puffton","followers_url":"https://api.github.com/users/Puffton/followers","following_url":"https://api.github.com/users/Puffton/following{/other_user}","gists_url":"https://api.github.com/users/Puffton/gists{/gist_id}","starred_url":"https://api.github.com/users/Puffton/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Puffton/subscriptions","organizations_url":"https://api.github.com/users/Puffton/orgs","repos_url":"https://api.github.com/users/Puffton/repos","events_url":"https://api.github.com/users/Puffton/events{/privacy}","received_events_url":"https://api.github.com/users/Puffton/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-10-12T02:53:10Z","updated_at":"2015-10-28T08:47:12Z","closed_at":null,"body":"I'm using the scatter chart superimposed on a plot background, looking to use both stroke and fill (for example white stroke, black fill), to ensure that regardless of background image, the dots will be clearly visible. Since the \"dot\" is a line, it's quite tricky (or do you guys know an easy css-only way?). Is there any rationale behind this decision? If it were a circle I would be able to style it easier."},"comment":{"url":"https://api.github.com/repos/gionkunz/chartist-js/issues/comments/151768189","html_url":"https://github.com/gionkunz/chartist-js/issues/482#issuecomment-151768189","issue_url":"https://api.github.com/repos/gionkunz/chartist-js/issues/482","id":151768189,"user":{"login":"woble","id":494873,"avatar_url":"https://avatars.githubusercontent.com/u/494873?v=3","gravatar_id":"","url":"https://api.github.com/users/woble","html_url":"https://github.com/woble","followers_url":"https://api.github.com/users/woble/followers","following_url":"https://api.github.com/users/woble/following{/other_user}","gists_url":"https://api.github.com/users/woble/gists{/gist_id}","starred_url":"https://api.github.com/users/woble/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/woble/subscriptions","organizations_url":"https://api.github.com/users/woble/orgs","repos_url":"https://api.github.com/users/woble/repos","events_url":"https://api.github.com/users/woble/events{/privacy}","received_events_url":"https://api.github.com/users/woble/received_events","type":"User","site_admin":false},"created_at":"2015-10-28T08:47:12Z","updated_at":"2015-10-28T08:47:12Z","body":"Fairly easy to accomplish. You have to replace the points with a circle and apply some custom styling.\r\n\r\n```css\r\n.ct-point-circle {\r\n    stroke-width: 2px;\r\n    fill: white;\r\n}\r\n\r\n/* Apply different styling per serie */\r\n.ct-series-a .ct-point-circle {\r\n    stroke: tomato;\r\n}\r\n\r\n.ct-series-b .ct-point-circle {\r\n    stroke: navy;\r\n}\r\n```\r\n\r\n```js\r\nvar circleRadius = 6;\r\nchart.on('draw', function(data){\r\n    if(data.type === 'point'){\r\n        var circle = new Chartist.Svg('circle', {\r\n            cx: data.x,\r\n            cy: data.y,\r\n            r: circleRadius,\r\n            class: 'ct-point-circle'\r\n        });\r\n\r\n        data.element.replace(circle);\r\n    }\r\n});\r\n```"}}