Hello,
I'm attempting to get the x-axis value from the Shared Template section of a HTML chart so that I can pass that value to a JS function for creating the tooltip display. Is there any way of getting this value? You can see the HTML markup below.
<telerik:RadHtmlChart ID="lcPayrollBiWeekly" runat="server" CssClass="FieldLabel" EnableViewState="false"> <ClientEvents OnSeriesHover="seriesHover" /> <ChartTitle Text="Bi-Weekly Payroll Comparison" > <Appearance BackgroundColor="White" Position="Top" /> </ChartTitle> <Legend> <Appearance BackgroundColor="White" Position="Bottom" /> </Legend> <PlotArea> <CommonTooltipsAppearance Shared="true"> <SharedTemplate> # for (var i = 0; i < points.length; i++) { # <div>#= formatLabel(points[i].value, points[i].value.x, points[i].series.name) #</div> # } # </SharedTemplate> </CommonTooltipsAppearance> <Appearance FillStyle-BackgroundColor="White"/> <YAxis> <LabelsAppearance DataFormatString="{0:C}" RotationAngle="0" /> <TitleAppearance Text ="Amount" /> <MinorGridLines Visible="false" /> </YAxis> <XAxis> <LabelsAppearance RotationAngle="0" /> <TitleAppearance Text="Payroll Period" /> <MinorGridLines Visible="false" /> </XAxis> </PlotArea></telerik:RadHtmlChart>
Thanks,
Johnathan
3 Answers, 1 is accepted
Hello Johnathan,
The category keyword can be used in the template to get the x-axis item that the data point belongs to. You can find a list of the built-in properties for the chart templates in the following articles:
- shared tooltips http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/clienttemplate/shared-template-for-tooltips
- individual templates http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/clienttemplate/overview#main-properties-used-in-a-clienttemplate
Regards,
Marin BratanovProgress Telerik
Rank 1
Hi Marin,
Thank you so much for your help. That fixed my original issue with the shared template. I do have one more question related to shared templates.Right now, the tool tip shows up with a background of white. When using the default tooltip display for html charts, the background color of the tool tip matches the series color. Is there a way to force shared template tool tips to use the same background color matching as well?
Thanks again for your help.
Johnathan
Hello,
The only approach I can suggest is using the HTML from the template to provide a custom CSS class or an inline style rule according to some logic (e.g., via a JS function that takes the data as arguments).
The shared tooltip is the same for all series associated with a single category, so it cannot have a color specific to a series, you can control a common color like this out of the box:
<CommonTooltipsAppearance Shared="true" Color="White" BackgroundColor="Gray">Regards, Marin Bratanov
Progress Telerik