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>
</text>
</svg>
</svg>
It doesn’t work. I have this error in console: Error from chart in div band0 TypeError: valuesWithLabels.reduce is not a function
and
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 ?
Thanks.
- Marjorie lesage asked 5 months ago
- last active 3 months ago
Hi,
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 10 months ago
- last active 10 months ago
Hi,
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?
https://www.scichart.com/documentation/win/current/webframe.html#CursorModifier.html
https://www.scichart.com/documentation/win/current/webframe.html#TooltipModifier.html
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.
Matt
- Matthew Kist asked 2 years ago
- last active 2 years ago
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.
- Nathanael Anderson asked 4 years ago
- last active 4 years ago
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:
Clone the examples project from GitHub and open the SciChart2D3D.Examples solution.
In UniformColumn3D.xaml change the XAxis, YAxis, ZAxis and ChartModifier elements to the following, from line 101 onwards:
<s3D:SciChart3DSurface.XAxis> <s3D:NumericAxis3D AutoRange="Always" /> </s3D:SciChart3DSurface.XAxis> <s3D:SciChart3DSurface.YAxis> <s3D:NumericAxis3D AutoRange="Always" /> </s3D:SciChart3DSurface.YAxis> <s3D:SciChart3DSurface.ZAxis> <s3D:NumericAxis3D AutoRange="Always" /> </s3D:SciChart3DSurface.ZAxis> <s3D:SciChart3DSurface.ChartModifier> <s3D:TooltipModifier3D HoverDelay="150" CrosshairMode="Lines" ShowTooltipOn="MouseOver" /> </s3D:SciChart3DSurface.ChartModifier>
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.
Add GrowBy=”0.1, 0.1″ to each axis property as follows:
<s3D:SciChart3DSurface.XAxis> <s3D:NumericAxis3D AutoRange="Always" GrowBy="0.1,0.1" /> </s3D:SciChart3DSurface.XAxis> <s3D:SciChart3DSurface.YAxis> <s3D:NumericAxis3D AutoRange="Always" GrowBy="0.1,0.1" /> </s3D:SciChart3DSurface.YAxis> <s3D:SciChart3DSurface.ZAxis> <s3D:NumericAxis3D AutoRange="Always" GrowBy="0.1,0.1"/> </s3D:SciChart3DSurface.ZAxis>
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.
- Stephen Hewlett asked 4 years ago
- last active 4 years ago
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.
I modified SeriesTooltips3DChart.xaml by adding:
<UserControl.Resources>
<Style x:Key="MyCrosshairOverlayStyle" TargetType="Line">
<Setter Property="Stroke" Value="Red" />
<Setter Property="StrokeThickness" Value="2" />
</Style>
<Style x:Key="MyCrosshairProjectionStyle" TargetType="t3D:CrosshairLines">
<Setter Property="CrosshairOverlayStyle" Value="{StaticResource MyCrosshairOverlayStyle}" />
<Setter Property="ProjectionMode" Value="Crosshair" />
</Style>
</UserControl.Resources>
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?
- Stephen Hewlett asked 4 years ago
- last active 4 years ago
Hello,
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.
Thanks,
Rachel
- MCCM COOP.1 asked 4 years ago
- last active 4 years ago
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.
Thanks,
Harish
- Harish Viswanathan asked 4 years ago
- last active 4 years ago
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 4 years ago
- last active 4 years ago
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.
- David La Fleur asked 5 years ago
- last active 1 year ago
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
- Appear on left-click rather than on hover
- Stay open until the user clicks outside them (or the mouse leaves the chart area)
- 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.
- David La Fleur asked 5 years ago
- last active 5 years ago
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.
Thanks,
Rakesh Bandari.
- Rakesh Bandari asked 6 years ago
- last active 3 years ago
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
- Andrei Sushynski asked 7 years ago
- last active 7 years ago
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
- Andrei Sushynski asked 7 years ago
- last active 7 years ago
Hello,
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.
Thanks.
- Daniel Moncada asked 7 years ago
- last active 7 years ago
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:SciChartSurface.RenderableSeries>
<s:FastLineRenderableSeries
Stroke="#ff6495ed"
StrokeThickness="2"
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:FastLineRenderableSeries
Stroke="#ffe2460c"
StrokeThickness="2"
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}" />
</s:SciChartSurface.RenderableSeries>
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 7 years ago
- last active 7 years ago
Hello,
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
Hi,
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));
form.ShowDialog();
ZoomChartToExtents(chart);
}
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.ZoomExtents();
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)
1 , Action`1 )
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
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 http://support.scichart.com/index.php?/Knowledgebase/Article/View/17235/32/custom-chartmodifiers—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.
Thanks
Charbel
- cabdo asked 8 years ago
- last active 8 years ago
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!
- Andrew Burnett-Thompson asked 9 years ago
- last active 9 years ago