Search code examples
chartskendo-uijquery-svg

Scale bubble in chart

I have the following code modified from the kendoui demo

http://jsbin.com/alupin/6/

I am trying to scale the size of the bubble on mouseover and back to original size on mouse out however I am getting a trace of the border of the circle.

I am using kendoui to draw the chart and jquery svg to animate the svg elements.

Thanks for any help.

Solution

  • The border is added as part of the bubble highlight state. This appears to be undocumented, but you can control the highlight border via an option:

    {
    type: "bubble",
    highlight: {
        border: {
            width: 0
        }
    },
    ...
}

    See it in action in the updated JSBin.

    I'll add this to the Kendo UI Docs repository.