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 115 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Johnathan
Top achievements
Rank 1
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

Sort by
0
Marin Bratanov
Telerik team
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.
0
Johnathan
Top achievements
Rank 1
answered on 31 May 2017, 01:34 PM

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

0
Marin Bratanov
Telerik team
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.
Tags
Chart (HTML5)
Asked by
Johnathan
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Johnathan
Top achievements
Rank 1
Share this question
or