Change shared tooltip client-side template of RadHtmlChart
Environment
| Product Version | 2019.3.917 |
| Product | RadHtmlChart for ASP.NET AJAX |
Description
You can control the shared Tooltip appearance of RadHtmlChart by defining a custom common tooltip client-side template like explained here: https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/clienttemplate/overview
Solution
<telerik:RadHtmlChart runat="server" ID="BoxPlotChart" Width="800" Height="500">
<PlotArea>
<CommonTooltipsAppearance Shared="True">
<ClientTemplate>
Lower: #= dataItem.lower# <br/>
Q1: #= dataItem.q1# <br/>
Median: #=dataItem.median# <br/>
Mean: #=dataItem.mean # <br/>
Q3: #=dataItem.q3 # <br/>
Upper: #=dataItem.upper # <br/>
</ClientTemplate>
</CommonTooltipsAppearance>
<Series>
<telerik:BoxPlotSeries
DataLowerField="lower"
DataQ1Field="q1"
DataMedianField="median"
DataQ3Field="q3"
DataMeanField="mean"
DataUpperField="upper"
DataOutliersField="outliers">
<TooltipsAppearance Color="White"></TooltipsAppearance>
<Appearance FillStyle-BackgroundColor="#4f99d2"></Appearance>
</telerik:BoxPlotSeries>
</Series>
<XAxis>
<Items>
<telerik:AxisItem LabelText="January" />
<telerik:AxisItem LabelText="February" />
<telerik:AxisItem LabelText="March" />
</Items>
</XAxis>
</PlotArea>
<ChartTitle Text="Total money spent on online purchases"></ChartTitle>
</telerik:RadHtmlChart>
protected void Page_Load(object sender, EventArgs e)
{
BoxPlotChart.DataSource = GetData();
}
protected DataTable GetData()
{
DataTable table = new DataTable();
table.Columns.Add(new DataColumn("lower", typeof(int)));
table.Columns.Add(new DataColumn("q1", typeof(int)));
table.Columns.Add(new DataColumn("median", typeof(int)));
table.Columns.Add(new DataColumn("q3", typeof(int)));
table.Columns.Add(new DataColumn("upper", typeof(int)));
table.Columns.Add(new DataColumn("mean", typeof(int)));
table.Columns.Add(new DataColumn("outliers", typeof(int?[])));
table.Rows.Add(new object[] { 26, 38, 51, 63, 75, 49, new int?[] { 20, 140, 145, 5, 90, 100 } });
table.Rows.Add(new object[] { 46, 58, 66, 100, 105, 68, new int?[] { 120, 110, 15 } });
table.Rows.Add(new object[] { 31, 41, 52, 62, 70, 52, new int?[] { 14, 20, 85, 135 } });
return table;
}