Home › forums › Using CanvasJS › Develop custom chart with bubbles
Tagged: bubble graph, canvasjs, custom
This topic contains 5 replies, has 3 voices, and was last updated by Bivek Singh 2 weeks, 4 days ago.
I want to develop custom chart like https://i.stack.imgur.com/OCmq1.png this. FYI, I’m a primary UI developer of the project and my client purchased license.
So far, I’ve tried many things but didn’t reached to the final step.
Here is my JSfiddle: https://jsfiddle.net/2L7ft7ry/2/
What’s the best way to achieve my goal and I would also like to put user avatar in bubbles instead name if possible.
You can customize labels, indexLabels, axis, marker properties like color, size etc. Please check documentation for more options. Check this jsfiddle for updated code.
Thanks for the prompt response.
I appreciate your help and also I notice that on hover text/label on the bubbles are becomes hidden. Can we make bubble text always visible and Is there any best way to show overlapped bubbles?
I would also like to show the users profile pictures instead users initial letters (for eg. show images in bubbles instead JJ, HH, GG text)
FYI, I’ll send licence details via email. I hope you’ll get it and respond me back soon.
Its not possible to avoid overlapping of scatter-points/bubbles, when they are at same(or nearest) points. But you can show up all dataPoints by setting either fillOpacity or reducing the markerSize.
When dataPoints are highlighted, indexlabels that are placed inside will not be shown. To avoid this you can disable highlighting the dataPoint. Check this updated jsfiddle.
Sorry, positioning image instead of indexLabels is not available as of now. But you can place an image in toolTip. Please check this jsfiddle for the same.
Ok, sounds good.
You guys are planning to implement showing images in plots/bubbles in your future enhancements?
Yes. Although, We have it in our road map, we can’t promise a date now.
You must be logged in to reply to this topic.
ASP.NET MVC Charts
ContactSales EnquiriesSupport ForumTwitter Support Handle