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
8k views

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

1 vote
10k views

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:

    <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?

0 votes
8k views

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: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>
    
  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: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>
    
  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
16k views

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
1 vote
3k views

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.

0 votes
7k views

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.

1 vote
12k views

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
11k views

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
0 votes
16k views

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!

0 votes
12k views

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
1 vote
8k views

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
8k views

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

0 votes
12k views

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.

1 vote
2k views

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 1 year ago
  • last active 1 year ago
0 votes
9k views

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
12k views

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

Showing 16 results

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies