How to display vertical line for sparkline's tooltip?

[Troy S.]

We are using Tererik's RadHtmlChart in sparkline layout mode with a single line series.  I am trying to figure out how to display the vertical line in the tooltip as demonstrated on the MEAN TEMP chart via https://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/sparklinechart/defaultcs.aspx.  I need to accomplish this via server-side C#, not ASCX markup (I am configuring all 14 sparkline controls on our web page via a single C# method to minimize the amount of duplicate ASCX code).  I suspect the vertical line may be controlled by the unusual background settings within the sparklines-wrapper CSS style but I can find no documentation on this specific feature to help guide me.

Thanks for your time and attention.

Troy

My ASCX:
                    <div class="sparklineWrapper">
                        <telerik:RadHtmlChart ID="RadHtmlChart_Sales" runat="server" Layout="Sparkline" class="sparkline" />
                    </div>

My C#:
        protected void ConfigureSparklineControl(string id)
        {
            RadHtmlChart sparkline = this.FindControl(id) as RadHtmlChart;

            // turn off transitions so there's no flicker when the graph is repainted with new data
            sparkline.Transitions = false;

            // hide the Legend area to prevent displaying the clickable 1-pixel link
            sparkline.Legend.Appearance.Visible = false;

            // ... other configuration code here
        }

[Danail Vasilev]

Hi Troy,

I am sorry to say that the crosshair functionality is exposed only by the x-axis of the sparklines and not by the other series types. Nevertheless I have logged this idea in our feedback portal here, so that you can monitor, comment and raise its priority by voting on it.

I have also updated your Telerik points for sharing your ideas with us.

Regards,
Danail Vasilev
Telerik

[Troy S.]

Danail,

Thanks for taking the time to respond but I don't understand your answer.  I see the vertical line displayed in the tooltip on the Mean Temp sparkline graph on the demo page I previously mentioned.  How do I achieve that?  I'm not asking if a specific feature is possible, I'm asking how you guys achieved that functionality in one of your demos so I can duplicate it.  In other words, what portions of your HTML/CSS/C# code causes the vertical line to be displayed in the tooltip?  I can find no documentation for it.

Thanks.

Troy

[Danail Vasilev]

Hi Troy,

Thank you for the additional clarification.

The x-axis cross hair is actually an SVG Path element (you can see that by inspecting this element), that is changing its position on the client with JavaScript. I have created a short video in order to illustrate how to find that element and change its positions.

Regarding our documentation resources, their purpose is to provide how to achieve a particular functionality and not how this functionality is implemented. If you want, however, to see how a particular functionality is implemented or modify an existing one you can refer to the source code of Telerik UI for ASP.NET AJAX, which however, requires a license purchase.

Regards,
Danail Vasilev
Telerik

[Troy S.]

Danail,

Thanks for your time and explanation and for sending me the video.  I now have a much better understanding of the intricacies of the sparkline's vertical line.

Take care.

Troy