Not a question, but a discovery that I didn't see documented...
I wanted to add a custom tooltip to my sparkline column chart. However, I kept getting duplicate series values showing in the tooltip. (See the image "sparkline-tooltip-series.jpg.)" It seems that the series value is displayed in addition to whatever you put in the template if the template is added to the Series. Here is the code behind the example in the image:
To avoid this extra appearance of the series value, you have to use a shared template and put it in the PlotArea (not the Series). Code example for sparkline-tooltip-shared.jpg:
I wanted to add a custom tooltip to my sparkline column chart. However, I kept getting duplicate series values showing in the tooltip. (See the image "sparkline-tooltip-series.jpg.)" It seems that the series value is displayed in addition to whatever you put in the template if the template is added to the Series. Here is the code behind the example in the image:
<telerik:RadHtmlChart runat="server" ID="rhcSol" Layout="Sparkline" Width="150px" Height="40px"> <PlotArea> <Series> <telerik:ColumnSeries DataFieldY="cxCount"> <Appearance FillStyle-BackgroundColor="Red"></Appearance> <TooltipsAppearance> <ClientTemplate><div style="color:white;">Sol #= category #</div> <div> #= value #</div> </ClientTemplate> </TooltipsAppearance> </telerik:ColumnSeries> </Series> <XAxis DataLabelsField="sol"></XAxis> </PlotArea> <Legend> <Appearance Visible="false"></Appearance> </Legend></telerik:RadHtmlChart>To avoid this extra appearance of the series value, you have to use a shared template and put it in the PlotArea (not the Series). Code example for sparkline-tooltip-shared.jpg:
<telerik:RadHtmlChart runat="server" ID="rhcSol" Layout="Sparkline" Width="150px" Height="40px"> <PlotArea> <CommonTooltipsAppearance Shared="true" Visible="true"> <SharedTemplate><div style="color:white;">Sol #= category #</div> <div style="text-align:right;"> #= points[i].value #</div> </SharedTemplate> </CommonTooltipsAppearance> <Series> <telerik:ColumnSeries DataFieldY="cxCount"> <Appearance FillStyle-BackgroundColor="Red"></Appearance> <TooltipsAppearance> </TooltipsAppearance> </telerik:ColumnSeries> </Series> <XAxis DataLabelsField="sol"></XAxis> </PlotArea> <Legend> <Appearance Visible="false"></Appearance> </Legend></telerik:RadHtmlChart>2 Answers, 1 is accepted
0
Hi ,
Sparklines have their shared tooltip enabled by default. It is fine to set the tooltip of each series, however, you must disable the shared one. For example:
ASPX:
C#:
Regards,
Danail Vasilev
Telerik
Sparklines have their shared tooltip enabled by default. It is fine to set the tooltip of each series, however, you must disable the shared one. For example:
ASPX:
<telerik:RadHtmlChart runat="server" ID="rhcSol" Layout="Sparkline" Width="150px" Height="40px"> <PlotArea> <CommonTooltipsAppearance Shared="false"></CommonTooltipsAppearance> <Series> <telerik:ColumnSeries DataFieldY="cxCount"> <Appearance FillStyle-BackgroundColor="Red"></Appearance> <TooltipsAppearance> <ClientTemplate><div style="color:white;">Sol #= category #</div><div> #= value #</div> </ClientTemplate> </TooltipsAppearance> </telerik:ColumnSeries> </Series> <XAxis DataLabelsField="sol"></XAxis> </PlotArea> <Legend> <Appearance Visible="false"></Appearance> </Legend> </telerik:RadHtmlChart>C#:
protected void Page_Load(object sender, EventArgs e){ rhcSol.DataSource = GetData(); rhcSol.DataBind();}protected DataTable GetData(){ DataTable dt = new DataTable(); dt.Columns.Add("ID", typeof(int)); dt.Columns.Add("cxCount", typeof(int)); dt.Columns.Add("sol", typeof(string)); dt.Rows.Add(1, 2, "item1"); dt.Rows.Add(2, 5, "item2"); dt.Rows.Add(3, 6, "item3"); return dt;}Regards,
Danail Vasilev
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
Tom
Top achievements
Rank 1
Rank 1
answered on 21 Oct 2014, 12:11 PM
Thanks, Danail. I sure thought I was seeing the same behavior (duplicate info in the tool tip) even with shared set to false. However, a quick test confirms your reply. I did notice that the ClientTemplate (non-shared) tool tip was unacceptably slow--at least in my test. Glad that the shared tool tip works so much better--and that seems to be the more logical approach anyway.