Home Forums Chart Support Develop custom chart with bubbles

Develop custom chart with bubbles

Viewing 7 posts - 1 through 7 (of 7 total)
  • #13487


    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.


    Hi Vishwas,

    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.



    We have released v1.9.6 Beta with Methods & Properties, which allows you to programmatically access internally calculated values, export chart as image, print chart, etc. Please refer to the release blog for more information.

    Please check this jsfiddle for an example for positioning image over dataPoint.

    Vishwas R
    Team CanvasJS

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.