This is a migrated thread and some comments may be shown as answers.

[Solved] Show 2 datas in tooltip (HTMLChart - Pie chart)

2 Answers 501 Views

Chart (HTML5)

This is a migrated thread and some comments may be shown as answers.

Alex asked on 14 Apr 2013, 08:26 AM

Hi,
I want to display more than one data in the tooltip (on mouse hover) in pie chart (HTMLChart)
ex. project1 - output status(%) - started date.

<telerik:RadHtmlChart Height="400px" runat="server" ID="PieChartProjectOutput" DataSourceID="DSProjectOutcome"

Width="800px">

<Legend>

<Appearance BackgroundColor="White" Position="Right" Visible="true">

</Appearance>

</Legend>

<PlotArea>

<Series>

<telerik:PieSeries DataFieldY="Output" StartAngle="90" Name="Role_id"
ExplodeField="Output"

NameField="Project_Name">

<LabelsAppearance Position="Circle" DataFormatString="{0}" DataField="Output">

</LabelsAppearance>

<TooltipsAppearance DataFormatString="{1}{0}"></TooltipsAppearance>

</telerik:PieSeries>

</Series>

</PlotArea>

</telerik:RadHtmlChart>

Also i want to change the legend size (to display bigger than the normal size).
pls help me how to do that.

Thanks
-Alex

2 Answers, 1 is accepted

answered on 15 Apr 2013, 07:20 AM

Hi Alex,

You can display different values for the tooltip of a particular Series Item by using ClientTemplates, and only if the RadHtmlChart is databound to a datasource. For example:

<telerik:RadHtmlChart Height="400px" runat="server" ID="PieChartProjectOutput" DataSourceID="DSProjectOutcome"

Width="800px">

...

<telerik:PieSeries DataFieldY="Output" StartAngle="90" Name="Role_id"

ExplodeField="Output" NameField="Project_Name">

<LabelsAppearance Position="Circle" DataFormatString="{0}" DataField="Output">

</LabelsAppearance>

<TooltipsAppearance ClientTemplate="#= kendo.format(\'{0:P}\', dataItem.OutputStatus)#<br />#=dataItem.StartedDate#"></TooltipsAppearance>

</telerik:PieSeries>

...

Where the highlighted text is the columns from the datasource which will be used for displaying the tooltips. You can also find useful HtmlChart - Client Templates for Series Labels and Tooltips online demo as well as Formatting Numbers help article.

Regarding the modifying of the HtmlChart's legend size, you can use the TextStyle property, in order to change its appearance. For example:

<telerik:RadHtmlChart Height="400px" runat="server" ID="PieChartProjectOutput" DataSourceID="DSProjectOutcome"

Width="800px">

<Legend>

<Appearance BackgroundColor="White" Position="Right" Visible="true">

<TextStyle FontSize="14" Color="Blue" FontFamily="Courier New, sans-serif" />

</Appearance>

</Legend>

...

Regards,
Danail Vasilev
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.