Hi Swathi,
Thank you for the additional information.
There is an important change in the rendering of the tooltips, so that they render now not in the chart but directly in the body tag.
The only way to offset the labels or style them with a particular CSS for a certain chart is to attach to the seriesHover event where you can access them and do that. For example:
CSS:
JavaScript:
ASPX:
Regards,
Danail Vasilev
Telerik
Thank you for the additional information.
There is an important change in the rendering of the tooltips, so that they render now not in the chart but directly in the body tag.
The only way to offset the labels or style them with a particular CSS for a certain chart is to attach to the seriesHover event where you can access them and do that. For example:
CSS:
<style> .myClass { color: red !important; }</style><script lang="javascript"> function OnSeriesHover(args) { setTimeout(function () { //Offset tooltip var tooltip = $telerik.$(".k-tooltip")[0]; var newLeft = (parseInt(tooltip.style.left) - 56) + "px"; tooltip.style.left = newLeft; //Add CSS class to the tooltip Sys.UI.DomElement.addCssClass(tooltip, "myClass") }, 270); }</script>ASPX:
<telerik:RadHtmlChart runat="server" ID="BubbleChart" Width="500" Height="400"> <ClientEvents OnSeriesHover="OnSeriesHover"/> <PlotArea> <Series> <telerik:BubbleSeries> <Appearance FillStyle-BackgroundColor="#6ab2c9"> </Appearance> <TooltipsAppearance DataFormatString="Percentage of Market Share: {2}%<br /> Number of products: {0}<br /> Sales: ${1}" /> <SeriesItems> <telerik:BubbleSeriesItem Size="3" X="5" Y="5500" /> <telerik:BubbleSeriesItem Size="12" X="14" Y="12200" /> <telerik:BubbleSeriesItem Size="33" X="20" Y="60000" /> <telerik:BubbleSeriesItem Size="10" X="18" Y="24400" /> <telerik:BubbleSeriesItem Size="42" X="22" Y="32000" /> </SeriesItems> </telerik:BubbleSeries> </Series> </PlotArea></telerik:RadHtmlChart>Regards,
Danail Vasilev
Telerik
See What's Next in App Development. Register for TelerikNEXT.