Pre loader

Tag: TooltipModifier

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

0 votes

Hi thank you for resounding to other questions,

I have having a strange issue. When I add the ScatterRenderableSeries3D to a surface3D, the tooltip3D works. when I add more ScatterRenderableSeries3D it still works. but if I only update the xyzdataseries then the tooltip stops working.

Please see the code below,

   => {
            if (!sciChart3DSurfaceRef.current.renderableSeries.getById(annotationData?.id)) {
                if (annotationData.x.length > 0) {
                    //console.log("creating data", annotationData)
                    sciChart3DSurfaceRef.current.renderableSeries.add(new ScatterRenderableSeries3D(wasmContextRef.current, {
                        dataSeries: new XyzDataSeries3D(wasmContextRef.current, {
                            xValues: annotationData.x,
                            yValues: annotationData.y,
                            zValues: annotationData.z,
                            metadata: annotationData.metadata // Optional metadata here. Property vertexColor is read to color the point,

                        // When metadata colours are provided, the pointMarker.fill is ignored
                        pointMarker: new SpherePointMarker3D(wasmContextRef.current, {
                            size: 2.0,
                        opacity: 0.7
            else {
                console.log("setting data", annotationData)
                const dataSeries = new XyzDataSeries3D(wasmContextRef.current, {
                    xValues: annotationData.x,
                    yValues: annotationData.y,
                    zValues: annotationData.z,
                    metadata: annotationData.metaata // Optional metadata here. Property vertexColor is read to color the point,
                sciChart3DSurfaceRef.current.renderableSeries.getById( = dataSeries

When a new renderableSeries is added, the tooltip3d on that data works great! but if I add new dataseries like in else statement the tooltip3d disappears.

Any help is appreciated.


1 vote
0 answers

I have a design where I want to show something like a box at the top of the chart and when hovering on it, it should show up a tooltip with some info, the issue I’m running into is the fact that I can’t seem to find way I can add tooltip to box annotation other than adding another box annotation when hover or hit, but it seem that it is not recommended base on my previous post before.

I also looked into scatterXY series or pointMarker, the issue with Point marker or scatter series is that I can only set one x and y, but my design require the box to be from a certain x1 point to x2 point. I can probably try to calculate the width and set the width to the point marker, but I would rather not if there is a better way.

Also looked into column chart, but that also have the same issue of only one x and y point and not sure about tooltip, but definitely seem more promising than annotation.

Please let me know if there is a better way to accomplish this, thank you!

The image below is the design.

  • Nung Khual asked 4 months ago
  • last active 4 months ago
1 vote

Hello, i want to customize tooltip in graph (SplineBandRenderableSeries), i can change the tooltip content but if i return svg like your example ( return <svg width="${width}" height="${height}">
<circle cx="50%" cy="50%" r="50%" fill="${tooltipColor}"/>
<svg width="100%">
<text y="40" font-size="13" font-family="Verdana" dy="0" fill="${tooltipTextColor}">
<tspan x="15" dy="1.2em">${tooltipTitle}</tspan>
<tspan x="15" dy="1.2em">x: ${seriesInfo.formattedXValue} y: ${seriesInfo.formattedYValue}</tspan>
It doesn’t work. I have this error in console: Error from chart in div band0 TypeError: valuesWithLabels.reduce is not a function
Error from chart in div band0 DOMException: Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node.
at RolloverTooltipSvgAnnotation.delete …

My graph has 3 renderableSeries (1 XyDataSeries and 2 XyyDataSeries)

Please can you send me an example in (javascript) for modify tooltip styling ?


1 vote


When hovering mouse over a graph, the box that appears showing the name and value gets cut off instead of flipping to remain in the area.

Can you please help me to overcome this issue or if any, idea or lead much appreciated. Please let me know if you need more information.

Please find the screenshot for your reference.

  • Barani G asked 1 year ago
  • last active 1 year ago
0 votes


I want to use a CursorModifier that snaps to series, but not all series. I can see the BaseRenderableSeriesViewModel has, for example, IncludeTooltipModifier, but there is no IncludeCursorModifier property so I haven’t been able to get it to work out of the box.
Is this a missing feature?

Are there any work arounds? I was thinking of adding metadata to a series, but there is no metadata for the entire series, just a metadata for the point markers.

I also tried to create a class that inherits from, for example, LineRenderableSeriesViewModel, that has an IncludeCursorModifier, or similarly named property. The issue I had with that is that when I create my own inherited version of CursorModifer I only have access to the ParentSurface?.RenderableSeries which is not the ViewModel version of the series, and thus that information seems to be lost – I can’t cast a member of RenderableSeries to my custom MyLineRenderableSeriesViewModel, thus I can’t inspect whether it should be included in the cursor modifier.

I appreciate the help.


1 vote

Originally my chart would
– create the surface
– setup the chart modifiers
– setup the axis
– add the data (SCIFastLineRenderableSeries).

However, it appears that when you .add(new SCIFastLineRenderableSeries) it recreates all the tooltips on each add, and finally on the very last SCIFastLineRenderableSeries that is inserted will get two duplicate tooltips. This happens both with the default tooltips or custom tooltips.

I finally noticed that some of your examples you setup the modifiers at the end after adding the data. So I moved all the chart modifiers into a separate function and called it after the data is setup, and now the proper number of tooltips appears.

This might either need to be noted somewhere prominent in the iOS docs; or even better the order shouldn’t matter.

0 votes

When the GrowBy property on NumericAxis3D is specified, a tooltip modifier on the same 3D chart shows over data points that are not those under the mouse pointer.

To replicate the issue:

  1. Clone the examples project from GitHub and open the SciChart2D3D.Examples solution.

  2. In UniformColumn3D.xaml change the XAxis, YAxis, ZAxis and ChartModifier elements to the following, from line 101 onwards:

        <s3D:NumericAxis3D AutoRange="Always"  />
        <s3D:NumericAxis3D AutoRange="Always" />
        <s3D:NumericAxis3D AutoRange="Always" />
        <s3D:TooltipModifier3D HoverDelay="150" CrosshairMode="Lines" ShowTooltipOn="MouseOver" />
  3. Run the application and observe that the 3D Charts -> Basic Chart Types -> Uniform Column 3D chart shows a chart with correct tooltips appearing when the mouse is hovered over columns on the chart.

  4. Add GrowBy=”0.1, 0.1″ to each axis property as follows:

        <s3D:NumericAxis3D AutoRange="Always" GrowBy="0.1,0.1"  />
        <s3D:NumericAxis3D AutoRange="Always" GrowBy="0.1,0.1" />
        <s3D:NumericAxis3D AutoRange="Always"  GrowBy="0.1,0.1"/>
  5. Run the application again and hover the mouse over the same chart. Note that the tooltop is now shown for a data point different to whichever one the mouse is over at the time, which is incorrect.

1 vote

I am trying to modify the 3D Charts > Tooltips and Hit Test 3D Charts > Series Tooltips 3D Chart example to change the colour of the tooltip crosshairs to red. By crosshairs I mean the green lines in the image attached.

Green Crosshairs

I modified SeriesTooltips3DChart.xaml by adding:

        <Style x:Key="MyCrosshairOverlayStyle" TargetType="Line">
            <Setter Property="Stroke" Value="Red" />
            <Setter Property="StrokeThickness" Value="2" />
        <Style x:Key="MyCrosshairProjectionStyle" TargetType="t3D:CrosshairLines">
            <Setter Property="CrosshairOverlayStyle" Value="{StaticResource MyCrosshairOverlayStyle}" />
            <Setter Property="ProjectionMode" Value="Crosshair" />

and modifying the TooltipModifier3D element:

<t3D:TooltipModifier3D CrosshairMode="Lines" CrosshairPlanesFill="#33FF6600" CrosshairProjectionStyle="{StaticResource MyCrosshairProjectionStyle}" />

I expected this to apply the coloured lines but it did not. What have I misunderstood?

0 votes


I recently upgraded from v3 to v5, and I cannot figure out what to replace ToolTipLabelTemplate types with now that it’s missing. I saw in a different question like this that you directed them to look at ToolTipModifier documentation, and I have looked there, but I can’t find anything helpful for this problem. Could you please direct me to an example or explain what to change for a ToolTipLabelTemplate to make it work in v5.


0 votes
0 answers

Hi ,

Is there any property by which I can stop the drag behavior of a tooltip on Scichart ? I have a reference point marker on the graph which displays a tooltip. I want this tooltip to be not able to move, since this is a reference point marker.


0 votes

It seems most of the modifiers bring up tooltip data with a pan, and then it goes away when the user lifts their finger. Is there any way to bring up tooltip data with a tap (and does not go away when the finger has lifted)? The main problem that we’re trying to solve is that we would like to be able to pan to look at the chart (and don’t want an axis pan), but would also like to bring up tooltip data.

  • Carolyn asked 5 years ago
  • last active 5 years ago
1 vote
0 answers

Tooltips from my TooltipModifier were being clipped at the SciChartSurface’s boundaries when they were long, which I didn’t like. I poked around a bit and discovered SciChartSurface.ClipModifierSurface. After setting this to false, the tooltips were allowed to spill over the boundaries as desired. Yay! However, certain elements including (but perhaps not limited to) the GridLinesPanel’s border lines and gridlines from adjacent plots end up rendering on top of the tooltip (see screenshot; it’s showing two surfaces stacked vertically, with a tooltip from the top one spilling over onto the one below it). Is there anything I can do to prevent this? Things that didn’t work were using a custom TooltipContainerStyle with the new container’s opacity set to 1.0 and its Panel.ZIndex to 100.

1 vote

Hi all. I would like to add tooltips to my chart, but have them behave a bit differently than they do by default. Specifically, they should

  1. Appear on left-click rather than on hover
  2. Stay open until the user clicks outside them (or the mouse leaves the chart area)
  3. Not appear if another ToolTip is already open (mostly follows from #2)

The existing ToolTipModifier can give me #1, but not #2 or #3, as far as I can tell.

So what’s the best way for me to implement this behavior? Can I get to it by subclassing the existing ToolTipModifier, or do I need to start from scratch? And if deriving is the answer, what would I need to override?

My motivation is that I would like to place buttons/hyperlinks in the tooltip for performing actions related to the clicked datapoint, so if there are completely different ways to achieve this that don’t involve tooltips at all, I’m open to suggestions.

0 votes

Hi ,

I am facing a issue with the tooltips.When the scichart surface width is small or the window that has the scichartsurface is small the tooltips are not coming out of chart surface. I can reproduce the issue in Scichart sample(CustomTooltipsWithModifiers) also.

I even tried setting ClipModifierSurface =”False” ClipToBounds=”False”, but no luck. I still have the issue.

FYI , I am attaching the .png files. I cannot attach the sample project here because the allowed upload size is smaller.

Rakesh Bandari.

0 votes

Hi, guys

Is there possibility to show tooltip by simply changing switch at the settings?
Not by tapping at the chart area as it implemented now.

Best regards,
Sushynski Andrei

0 votes

Hi, guys

it seems that i had found a mistake:

At SCICursorModifierStyle class if i try to set up axisVerticalTooltipCornerRadius property it lead to changing of axisHorizontalTooltipCornerRadius

Please take a look

Best regards,
Sushynski Andrei

0 votes


I’m having an issue trying to style a ToolTipModifier. Currently, I am populating my chart similar to your “500 series each with 500 points” example by using LineSeriesSource attached property. This works great for my scenario (tons of data), but as a result, I am not able to stylize my tooltip since all examples seem to be showing an attached property being used in XAML on the RenderableSeries.

Right now, I am simply just using a ToolTipModifier, which is working as expected. I’d perfer to re-style the tool tip via XAML, as our application is theme-able and we’d like to try and avoid code-behind has much as possible.


1 vote

I would like to apply a custom style to all tooltips, but I can’t seem to figure out how to do so. I’ve followed the custom tooltip example, but find that applying the same style to all series becomes very verbose when we have many series on the same chart. From the example:

        s:CursorModifier.TooltipTemplate="{StaticResource CursorTooltipTemplate1}"
        s:RolloverModifier.TooltipContainerStyle="{StaticResource TooltipStyle1}"
        s:RolloverModifier.TooltipTemplate="{StaticResource RolloverTooltipTemplate1}"
        s:TooltipModifier.TooltipContainerStyle="{StaticResource TooltipStyle1}"
        s:TooltipModifier.TooltipTemplate="{StaticResource TooltipTemplate1}"
        s:VerticalSliceModifier.TooltipContainerStyle="{StaticResource TooltipStyle1}"
        s:VerticalSliceModifier.TooltipTemplate="{StaticResource VerticalSliceTooltipTemplate1}" />
        s:CursorModifier.TooltipTemplate="{StaticResource CursorTooltipTemplate2}"
        s:RolloverModifier.TooltipContainerStyle="{StaticResource TooltipStyle2}"
        s:RolloverModifier.TooltipTemplate="{StaticResource RolloverTooltipTemplate2}"
        s:TooltipModifier.TooltipContainerStyle="{StaticResource TooltipStyle2}"
        s:TooltipModifier.TooltipTemplate="{StaticResource TooltipTemplate2}"
        s:VerticalSliceModifier.TooltipContainerStyle="{StaticResource TooltipStyle2}"
        s:VerticalSliceModifier.TooltipTemplate="{StaticResource VerticalSliceTooltipTemplate2}" />

My target style is the same for all types of series, so I don’t need to customize them beyond overriding the default style. I’ve tried removing the “x:key” attribute from my custom tooltip style (to make it apply to all unstyled tooltips), but it doesn’t work as I had hoped. So I’m guessing that they’re being styled in some way at lower levels that prevent this from working. Is there a way to style the tooltips globally or is the method shown in this example the best approach?

  • w b asked 8 years ago
  • last active 8 years ago
0 votes


My aim is to create a permament tooltip that will always show current mouse position and current position with extra information when cursor is over renderable series. I’ve looked through all examples and found suitable one (example). But there is a little problem. When cursor is out of renderable series x-data range, tool tip disappearrs, even ShowTooltipOnproperty is set “Always”.

How can I solve this problem?

Thanks in advance

  • Egor asked 8 years ago
  • last active 8 years ago
0 votes
0 answers


I am displaying some charts on the screen (4 per screen). When I double click one chart, it opens in another, modal window.
I have the below problem with the tooltip modifier and the rollover modifier (one is enabled at a time, tried with both, need the fix at least for the tooltip modifier)

When I close the window, the following happens, to the chart that was double clicked:

1- If the chart is a simple column chart, the tooltip modifier does not work as soon as the maximized window is closed. Nothing happens when I move the mouse. I found a simple workaround, which is to zoom in/out even very little, and the modifier works back. Here I’m forcing it by code:

private void ChrtSurface_OnMouseDoubleClick(object sender, MouseButtonEventArgs e)
            //Get the chart from the sender tag
            var surface = (SciChartSurface)sender;
            var chart = (SciChart)surface.Tag;

            //The chart is already executed, so no need  do that again. Start the single view form
            var form = new SingleChartView(new SingleChartViewModel(chart, this._viewModel.SelectedModule.Id));


public void ZoomChartToExtents(SciChart chart)
            var scichartSurface = lstCharts.FindVisualChildren<SciChartSurface>().FirstOrDefault(x => x.Tag == chart);
            Dispatcher.CurrentDispatcher.BeginInvoke(DispatcherPriority.ApplicationIdle, new Action<SciChartSurface>(ZoomExtents), scichartSurface);


        public void ZoomExtents(SciChartSurface chart)
            chart.ChartModifier.OnModifierMouseUp(new ModifierMouseArgs() { MouseButtons = MouseButtons.Right });

2- If the chart is a stacked chart, I get a null reference exception. Here’s the exception:

“An exception of type ‘System.NullReferenceException’ occurred in Abt.Controls.SciChart.Wpf.dll but was not handled in user code

Additional information: Object reference not set to an instance of an object.”

And the stack trace (if zoom extents is not called):

at Abt.Controls.SciChart.Visuals.RenderableSeries.StackedColumnRenderableSeries.HitTestInternal(Point rawPoint, Double hitTestRadius, Boolean interpolate)
at Abt.Controls.SciChart.Visuals.RenderableSeries.BaseRenderableSeries.HitTest(Point rawPoint, Double hitTestRadius, Boolean interpolate)
at Abt.Controls.SciChart.Visuals.RenderableSeries.BaseColumnRenderableSeries.HitTest(Point rawPoint, Double hitTestRadius, Boolean interpolate)
at Abt.Controls.SciChart.Visuals.RenderableSeries.BaseRenderableSeries.HitTest(Point rawPoint, Boolean interpolate)
at Abt.Controls.SciChart.ChartModifiers.InspectSeriesModifierBase. . (IRenderableSeries )
at Abt.Controls.SciChart.ChartModifiers.InspectSeriesModifierBase. .MoveNext()
at Abt.Controls.SciChart.ChartModifiers.TooltipModifier.YB(Point C, Point& D)
at Abt.Controls.SciChart.ChartModifiers.TooltipModifier.HandleMasterMouseEvent(Point mousePoint)
at Abt.Controls.SciChart.ChartModifiers.InspectSeriesModifierBase.YB(Point C)
at Abt.Controls.SciChart.ChartModifiers.InspectSeriesModifierBase.HandleMouseEvent(ModifierMouseArgs e)
at Abt.Controls.SciChart.ChartModifiers.InspectSeriesModifierBase.OnModifierMouseMove(ModifierMouseArgs e)
at Abt.Controls.SciChart.ChartModifiers.ModifierGroup.AC(IChartModifier C, ModifierEventArgsBase D)
at Abt.Controls.SciChart.ChartModifiers.ModifierGroup.YB(Action2 C, ModifierEventArgsBase D)
at Abt.Controls.SciChart.ChartModifiers.ModifierGroup.OnModifierMouseMove(ModifierMouseArgs e)
at Abt.Controls.SciChart.Utility.Mouse.MouseManager. (ModifierMouseArgs , IReceiveMouseEvents , Boolean )
at Abt.Controls.SciChart.Utility.Mouse.MouseManager.
. . (IReceiveMouseEvents )
at Abt.Controls.SciChart.Common.Extensions.EnumerableExtensions. [ ](IEnumerable
1 , Action`1 )
at Abt.Controls.SciChart.Utility.Mouse.MouseManager.
. (Object , MouseEventArgs )
at A. . (MouseEventArgs )
at A. . (Object , MouseEventArgs )
at System.Windows.Input.MouseEventArgs.InvokeEventHandler(Delegate genericHandler, Object genericTarget)
at System.Windows.RoutedEventArgs.InvokeHandler(Delegate handler, Object target)
at System.Windows.RoutedEventHandlerInfo.InvokeHandler(Object target, RoutedEventArgs routedEventArgs)
at System.Windows.EventRoute.InvokeHandlersImpl(Object source, RoutedEventArgs args, Boolean reRaised)
at System.Windows.UIElement.RaiseEventImpl(DependencyObject sender, RoutedEventArgs args)
at System.Windows.UIElement.RaiseTrustedEvent(RoutedEventArgs args)
at System.Windows.UIElement.RaiseEvent(RoutedEventArgs args, Boolean trusted)
at System.Windows.Input.InputManager.ProcessStagingArea()
at System.Windows.Input.InputManager.ProcessInput(InputEventArgs input)
at System.Windows.Input.InputProviderSite.ReportInput(InputReport inputReport)
at System.Windows.Interop.HwndMouseInputProvider.ReportInput(IntPtr hwnd, InputMode mode, Int32 timestamp, RawMouseActions actions, Int32 x, Int32 y, Int32 wheel)
at System.Windows.Interop.HwndMouseInputProvider.FilterMessage(IntPtr hwnd, WindowMessage msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
at System.Windows.Interop.HwndSource.InputFilterMessage(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
at MS.Win32.HwndWrapper.WndProc(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
at MS.Win32.HwndSubclass.DispatcherCallbackOperation(Object o)
at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
at MS.Internal.Threading.ExceptionFilterHelper.TryCatchWhen(Object source, Delegate method, Object args, Int32 numArgs, Delegate catchHandler)
at System.Windows.Threading.Dispatcher.LegacyInvokeImpl(DispatcherPriority priority, TimeSpan timeout, Delegate method, Object args, Int32 numArgs)
at MS.Win32.HwndSubclass.SubclassWndProc(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam)
at MS.Win32.UnsafeNativeMethods.DispatchMessage(MSG& msg)
at System.Windows.Threading.Dispatcher.PushFrameImpl(DispatcherFrame frame)
at System.Windows.Threading.Dispatcher.PushFrame(DispatcherFrame frame)
at System.Windows.Threading.Dispatcher.Run()
at System.Windows.Application.RunDispatcher(Object ignore)
at System.Windows.Application.RunInternal(Window window)
at System.Windows.Application.Run(Window window)
at System.Windows.Application.Run()
at ISF.Application.App.Main() in c:\Users\Charbel\Documents\Projects\ISF\ISFSolution\ISF.Application\obj\Debug\App.g.cs:line 0
at System.AppDomain._nExecuteAssembly(RuntimeAssembly assembly, String[] args)
at System.AppDomain.nExecuteAssembly(RuntimeAssembly assembly, String[] args)
at System.Runtime.Hosting.ManifestRunner.Run(Boolean checkAptModel)
at System.Runtime.Hosting.ManifestRunner.ExecuteAsAssembly()
at System.Runtime.Hosting.ApplicationActivator.CreateInstance(ActivationContext activationContext, String[] activationCustomData)
at System.Runtime.Hosting.ApplicationActivator.CreateInstance(ActivationContext activationContext)
at System.Activator.CreateInstance(ActivationContext activationContext)
at Microsoft.VisualStudio.HostingProcess.HostProc.RunUsersAssemblyDebugInZone()
at System.Threading.ThreadHelper.ThreadStart_Context(Object state)
at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean preserveSyncCtx)
at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean preserveSyncCtx)
at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
at System.Threading.ThreadHelper.ThreadStart()

If zoom extends is called, I get the following stack trace:

at Abt.Controls.SciChart.Visuals.RenderableSeries.StackedColumnRenderableSeries.GetXRange()
at Abt.Controls.SciChart.Visuals.Axes.AxisBase.YB()
at Abt.Controls.SciChart.Visuals.Axes.AxisBase.GetMaximumRange()
at Abt.Controls.SciChart.Visuals.SciChartSurface.YB(TimeSpan C)
at Abt.Controls.SciChart.Visuals.SciChartSurface.YB(TimeSpan C)
at Abt.Controls.SciChart.Visuals.SciChartSurface.ZoomExtents()
at ISF.Application.Dashboard.Windows.Dashboard.ZoomExtents(SciChartSurface chart) in c:\Users\Charbel\Documents\Projects\ISF\ISFSolution\ISF.Application\Dashboard\Windows\Dashboard.xaml.cs:line 54

More info in case it helps:

I tried using the SimpleRolloverModifier code from—part-1—creating-a-custom-rollover-modifier

And found that when the problem happens, the hit test either detects nothing or causes a null reference.

The problem ONLY happens when I open and close the modal window. If I don’t do that all works fine.


  • cabdo asked 9 years ago
  • last active 9 years ago
0 votes

A question was recently asked on priority support tickets – how to to apply a Template Selector to the RolloverModifier, to display different tooltips based on series type?

We are answering the question below so that other users can benefit from it!

Showing 21 results