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

Get X-Axis value from Shared Template section of HTML Chart

3 Answers 145 Views

Chart (HTML5)

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

Johnathan asked on 30 May 2017, 07:31 PM

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

answered on 31 May 2017, 09:46 AM

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:

Regards,

Marin Bratanov
Progress Telerik

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 01 Jun 2017, 10:47 AM

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

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.