Pre loader

Tag: ToolTip

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

1 vote
698 views

The chart is only showing 3 of 4 Tooltips, is there a way to avoid this?

1 vote
2k views

Hello, how do I remove the shadow from tooltips, generated by the VerticalSliceModifier?

Thanks!

1 vote
1k views

As if right now, I have create a custom annotation, which is a red circle and the idea is to show some info when hovering on it, like a tooltip.

Right now, when hovering on the red circle, I am adding another custom annotation to show the info and then removing it when not hovering anymore. The issue with this is that it is not very stable, as in if I don’t point my cursor right in the middle of the red circle, it won’t register as hit. I tried putting hitTestRadius to 50 on CursorModifier, but doesn’t seem to make any difference.

I have also try with xyScatterRenderableSeries and EllipsePointMarker, the issue I find with it is that it is interfering with my data series tooltip, as the cursor modifier recognize it as a chart series and try to show on the tooltip, which I don’t want. I only want the red circle to be trigger only when cursor is right on it.

The first image is my code and how I am trying to achieve it at the moment, it does work, but I don’t think it’s very stable, I wish there is a more natural way to do it.

The second image is how my current solution looks like, as you can see, the data series tooltip is overlapping it, which I want to avoid. I can’t think of a way to solve the overlapping issue yet. Other than unstableness and the tooltip overlapping, it work fine.

The third image is how I want it to look like.

  • Nung Khual asked 5 months ago
  • last active 5 months ago
1 vote
2k views

Hello, I am using SciChartJS and have a new requirement from our users as follows that I need help with the implementation. Any pointers from anyone would be a great help.

**Requirements: **

  • Assume that x-axis is Time and y-axis is prices.
  • There are multiple series in the chart (e.g., Bid Price, Ask Price)
  • Allow user to select a time on xAxis using CTRL + CLICK
  • When the user selects the time, show the rollover line and the tooltip for all series at the selected time
  • This rollover line and tooltip should remain visible until the user selects a new time on the x-axis at which point the rollover tooltip should display the tooltip for the new point.

I started inheriting the RolloverModifier but couldn’t find an appropriate method to show the tooltip.

So, I started implementing the above feature using CustomModifierBase2d and adding a VerticalLineAnnotation for the rollover line. But again, struggling with the tooltip.

If someone could help me out or give me pointers, that would be highly appreciated.

Best Regards,
Sachin Patel.

0 votes
8k views

We have a sciChart surface in a fragment that has a scrollable view. We enabled tooltips using custom cursor modifier on the sci chart to show the values as the selection (touching a point in the chart object).

When we are moving the selection on x-axis tooltip sometimes it works fine and disappears when the selection is taken out. But sometimes it get freezed. At the same time, if we touch and move the selection in a vertical axis, tooltip box gets stuck and does not disappear even when the selection is taken out.

Tried so far:
We tried to replicate the issue in landscape mode and it works fine.
If we make the chart object to the whole page view, tool tips appears and disappears as expected.
But when the same used in portrait mode as a part of fragment (50% of screen) , problem arises

Steps to reproduce:
Have a chart object in a scrollable view.
Make sure the chart object doesnot appear on the fully screen without scrolling.
Now scroll to see the chart object.
Try to see the tooltip and move the selection in vertical axis.

  • Krish J asked 9 months ago
  • last active 9 months ago
-1 votes
0 answers
7k views

When we move the cursor fast in Sci Chart surface, Sometimes its making customized tooltip (cursor Modifier) to freeze. We are not having this issue in landscape mode. we have this issue only when we use it in half of fragment.

View hierarchy:
swipe refresh>
nested Scrollview>
constraint layout>
view> –50% of screen
Sci Graphview> –50% of screen
/ constraint layout>
/nested Scrollview>
/swipe refresh>

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

Hi,

I’ve been trying to customize the RolloverModifier tooltip content with a vertical chart but am at a loss to try to get the format I need. I’d like to take in all the series info and display them in a tooltip together with a small icon and the y-value next to this.

I was able to do this in the CursorModifier content but unable to do so in the RolloverModifier which is what I really want to use.

I’ve included a CodeSandbox link below showing the custom SVG template and output on the CursorModifier I’d like to use for the RolloverModifier. Is this type of output template possible?

Thanks in advance!

1 vote
2k views

The SciChart Legend and Cursor Tooltip (Showed only Y axis value) are not display after changing the graph layout.
I need to show the graph legend and Tooltip for all the Y axis.

The chart should also show the x axis value and y axis value on the Tooltip for more clarity.

Before changing the layout the legend was showing the five series vertically one below the other. But i need to show the five legends in horizontally (One after the another).

I have added the chart definition code. The data is added though Ajax call and code for that ajax call is not added.

I have attached the image for your reference.

I have attached the zip file with the html file.

1 vote
2k views

The x, y values showing in the tooltip of crosshair are rounded to 1 decimal place. How I can I modify the tooltip to show the actual x, y values? And how can I change the text font size in the tooltip?

1 vote
8k views

Hello,

We are working on our Angular Dashboard again using the JS Chart component and one item we would like to tidy up is the Meta Data displayed in the Tool Tips against data points.

When the cursor is enabled and a data point is hovered over, tool tips with the meta data is displayed for all data points in the vertical line; please refer to the screenshot attached.

We would like the tool tip to only be shown when the cursor is on a specific data point. We are currently working with an offshore team and any help surrounding this would be appreciated.

Kind regards,

0 votes
5k views

Hi all,

When we enable the rollover modifier and drag the chart, we can see the tooltip.
However, when I release the finger, the tooltip also disappears.
Is there a way to keep the tooltip showing when releasing the finger?
The problem we want to solve is user will use their finger to mark a critical point, then we will take a screenshot of the chart to generate a report.
Not sure if there is any good way to make the tooltip keeps showing to achieve this requirement?
Thanks

  • DCMA DCMA asked 2 years ago
  • last active 7 months ago
0 votes
5k views

Hi
I am trying out JS SciChart based on the Blazor example you have posted more than a year ago.
I cannot get the auto scaling to work by code (the default behavior does auto scale once right after adding the data). Calling sciChartSurface.zoomExtents(); (or zoomExtentsX() and zoomExtentsY() after one another) does zoom into a very details portion of the graph.

Also (maybe related) the tooltip does not update when moving the cursor around, it always keeps the same data. I tried using CursorModifier as well as RolloverModifier, both having the same problem.

Attached the JS code and the c# files and a picture how this looks like after calling the autoScale() method.

Thanks for any help
Regards
Reto

0 votes
5k views

Hello,

I would like to be able to change the rollover tooltip cursor color. It seems to be defaulted to the lineseries areastyle property color. I would like to be able to change it to a different color. I have not been able to find anything in the docs regarding how to do this.

Thank you

  • C Bolton asked 2 years ago
  • last active 2 years ago
0 votes
5k views

Hello,

I would like to add a corner radius (to give rounded corners) to the SciChart rollover tooltip in iOS. I saw that there is a “tooltipCornerRadius” property in “SCITooltipModifierStyleProtocol”, but I am having trouble figuring out how to use this. Can someone point me in the right direction?

Thank you.

  • C Bolton asked 2 years ago
  • last active 2 years ago
1 vote
0 answers
5k views

Hello SciChart Team,
I have multiple charts in my application where all the charts are in the same ModifierGroup to show the RolloverModifier tooltip at the same time. My chart stack panel is inside a ScrollViewer and as per the suggestion for my previous question, I have set the chart’s TooltipUsageMode to PopUp. But now if I scroll down to the chart list and mouse hover on a chart, the tooltips are popping up over other view regions (check the attached screenshot). We tried to set the tooltip template Panel.ZIndex value to a lower value like here, but they are not working. Can you please let us know if there is any way to not show the chart tooltip over other view regions in Popup mode?

Please check my previous question to get the code sample-
https://www.scichart.com/questions/wpf/align-custom-tooltip-text-based-on-tooltip-position

1 vote
0 answers
8k views

Hello there,
I am testing your 3D chart by creating single chart and adding multi data on condition.Whenever adding new data I clear previous.
surfaceCommon3D.getRenderableSeries().clear();
surfaceCommon3D.getChartModifiers().clear();

Issues is when first data add tooltip working properly and after adding new data then checking tooltip value Application will crash and show this error:
java.lang.ArrayIndexOutOfBoundsException: index
at com.scichart.core.model.DoubleValues.get(SourceFile:6)
at com.scichart.charting3d.visuals.renderableSeries.hitTest.MeshSeriesInfo3D.update(SourceFile:10)

here is my tooltip snippet code:
TooltipModifier3D t1 = new TooltipModifier3D();
t1.setReceiveHandledEvents(true);
t1.setExecuteOnPointerCount(1);
surfaceCommon3D.getChartModifiers().add(new ModifierGroup3D(t1));

SurfaceMeshRenderableSeries3D snippet code:
rs = sciChart3DBuilder.newSurfaceMeshSeries3D()
.withDataSeries(ds)
.withDrawMeshAs(DrawMeshAs.SolidWireframe)
.withStroke(blackColor)
.withContourStroke(stroke)
.withStrokeThicknes(1f)
.withDrawSkirt(false)
.withMeshColorPalette(new GradientColorPalette(colors, stops))
.withMetadataProvider(new SurfaceMeshMetadataProvider3D(pnl_time_spot_Z_3d, xSize, “common3DChartLayout”))
.withSeriesInfoProvider(new CustomSeriesInfo3DProvider1(fromModel, xSize))
.build();

UpdateSuspender.using(surfaceCommon3D, new Runnable() {
@Override
public void run() {
surfaceCommon3D.setCamera(camera);
surfaceCommon3D.setXAxis(xAxis);
surfaceCommon3D.setYAxis(yAxis);
surfaceCommon3D.setZAxis(zAxis);
surfaceCommon3D.getRenderableSeries().add(rs);
surfaceCommon3D.invalidate();
}
});

I am Requesting you to solved my issues ASAP.
Thanks in Advance

0 votes
0 answers
4k views

Hello there,
I am testing your 3d chart in demo project but I added X,Y and Z data, also added tool-tip to check the value

final TooltipModifier3D tooltipModifier3D = new TooltipModifier3D();
tooltipModifier3D.setIsEnabled(true);
tooltipModifier3D.setMarkerPlacement(Placement.TopRight);
tooltipModifier3D.setExecuteOnPointerCount(1);
tooltipModifier3D.setCrosshairMode(CrosshairMode.Lines);
surfaceCommon3D.getChartModifiers().add(tooltipModifier3D);

And also implement custom tool-tip UI.

The Issues is when I hover cursor on chart it not showing exact position on tool-tip. I attach SS png you can check it,
SS showing my cursor is on position x=6 but on tooltip it showing x=2.Waiting for your reply.

Thanks You

1 vote
5k views

Is there any way to provide annotation tooltip onmouseover? Perhaps I can subscribe on surface mouse events and manage visibility and positions on “tooltip” annotations by myself? If so, could you please provide reference to surface mouse events API.

1 vote
8k views

To whom this may concern:

I have a Custom Renderable Series that I use to draws a polygon around the points on a scatter plot.

protected override void Draw(IRenderContext2D renderContext, IRenderPassData renderPassData)
{
    base.Draw(renderContext, renderPassData);

    var blobShellPoints = getBlobShellPoints();

    using (var polyPen = renderContext.CreateBrush(Colors.DodgerBlue, 0.3))
    {
        var startCoordinates = getCoordinatesFor(blobShellPoints[0].X, blobShellPoints[0].Y);

        using (var blobDrawingContext = renderContext.BeginPolygon(polyPen, startCoordinates.X, startCoordinates.Y))
        {
            foreach (var point in blobShellPoints)
            {
                var pointCoords = getCoordinatesFor(point.X, point.Y);

                blobDrawingContext.MoveTo(pointCoords.X, pointCoords.Y);
            }
        }
    }
}

I would like to know if there is some way to show a tooltip when the mouse hovers over the said drawn polygon. I don’t see any ability to do this after I finish creating the polygon or before the end of the encapsulated polyPen disposable. It should look something like the attached image.

Can you please advise? Thank you kindly for your response!

P.S. I realize some of this code may be obsolete since I’m using SciChart 5. If this is only possible in 6+ then that’s understandable.

  • Ari Sagiv asked 2 years ago
  • last active 2 years ago
0 votes
5k views

Hi, Custom tooltip is not working on v2.0.2179.
Its working on v2.0.2146. Can you please check the issue..

import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { XyDataSeries } from "scichart/Charting/Model/XyDataSeries";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { RangeSelectionChartModifier } from "./RangeSelectionChartModifier";
import { RubberBandXyZoomModifier } from "scichart/Charting/ChartModifiers/RubberBandXyZoomModifier";
import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { EXyDirection } from "scichart/types/XyDirection";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import { EClipMode } from "scichart/Charting/Visuals/Axis/AxisBase2D";
import { MouseButtonZoomChartModifier } from "./MouseButtonZoomChartModifier";
import { SeriesInfo } from "scichart/Charting/Model/ChartData/SeriesInfo";
import { CursorTooltipSvgAnnotation } from "scichart/Charting/Visuals/Annotations/CursorTooltipSvgAnnotation";
import { CursorModifier } from "scichart/Charting/ChartModifiers/CursorModifier";



async function initSciChart() {
    const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root");

      const xAxis = new NumericAxis(wasmContext);
      const yAxis = new NumericAxis(wasmContext);

      sciChartSurface.xAxes.add(xAxis);
      sciChartSurface.yAxes.add(yAxis);

      const xyData = new XyDataSeries(wasmContext);
      for (let i = 0; i < 250; i++) {
        xyData.append(i, Math.sin(i * 0.1));
      }
      sciChartSurface.renderableSeries.add(
        new FastLineRenderableSeries(wasmContext, { dataSeries: xyData })
      );

      const cursorModifier = new CursorModifier({
        crosshairStrokeThickness: 1,
        showTooltip: true,
        showAxisLabels: false,
        crosshairStroke: "transparent",
      });
      cursorModifier.tooltipSvgTemplate = (seriesInfo, svgAnnotation) => {
        let rowString = "";
        seriesInfo.forEach(() => {
          rowString = rowString + `<tspan x="8" dy="1.2em" fill="red">Test : 123</tspan>`;  
        });

        const string = `<svg width="300" height="33" x="0"><defs>
            <filter id="id_1610011455082" x="0" y="0" width="200%" height="200%">
            <feOffset result="offOut" in="SourceAlpha" dx="3" dy="3"></feOffset>
            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3"></feGaussianBlur>
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
            </filter>
            </defs>
            <rect rx="4" ry="4" width="95%" height="90%" style="stroke-width:1;stroke:'#ffffff'}"></rect>
            <svg width="100%"><text x="8" y="3" font-size="13" font-family="Verdana" dy="0">`;

        svgAnnotation.xCoordShift = 5;
        svgAnnotation.yCoordShift = 5;
        return string + rowString + `</text></svg></svg>`;
      };
      sciChartSurface.chartModifiers.add(
        cursorModifier
      );


      const mouseWheelModifier = new MouseWheelZoomModifier();
      mouseWheelModifier.modifierMouseWheel = args => {
        const delta = args.mouseWheelDelta * 0.1;
        mouseWheelModifier.parentSurface.xAxes.asArray().forEach(x => {
          x.scroll(delta, EClipMode.None);
        });
      };
      sciChartSurface.chartModifiers.add(
        new RubberBandXyZoomModifier({ xyDirection: EXyDirection.XDirection })
      );
      sciChartSurface.chartModifiers.add(mouseWheelModifier);
      sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
  }

   initSciChart();
0 votes
5k views

Hi SciChart team,

I have built a xyscatter chart with DateTime type X-Axis and Double type Y-Axis,
and built boxannotations to mark areas.

May I set the x-Axis value in the tooltip?
Or can I show properties of each item which means every point in the xyscatterseries, and customize the tooltip content style like adding the description of every properties.

  • Wade Yao asked 3 years ago
  • last active 3 years ago
0 votes
9k views

Hello,

I want to use the MultiplePieDonutChart. Like in the example, I want to have a touch tooltip.
I tried it with that code:

LinearLayout chartLayout = (LinearLayout) root.findViewById(R.id.chart_layout);
SciChartLegend legend = root.findViewById(R.id.pieChartLegend);

    chartLayout.addView(surface);

    SciChartBuilder.init(MainMenu.getActivity());

    final SciChartBuilder sciChartBuilder = SciChartBuilder.instance();

    final IPieRenderableSeries pieSeries = sciChartBuilder.newPieSeries().withSeriesName("HowPeopleTravel").withSegments(
            sciChartBuilder.newPieSegment().withValue(34).withTitle("Ecologic").withRadialGradientColors(0xff84BC3D, 0xff5B8829).build(),
            sciChartBuilder.newPieSegment().withValue(34.4).withTitle("Municipal").withRadialGradientColors(0xffe04a2f, 0xffB7161B).build(),
            sciChartBuilder.newPieSegment().withValue(31.6).withTitle("Personal").withRadialGradientColors(0xff4AB6C1, 0xff2182AD).build()
    ).build();
    final IPieRenderableSeries donutSeries = sciChartBuilder.newDonutSeries().withSeriesName("DetailedGroup").withSegments(
            sciChartBuilder.newPieSegment().withValue(28.8).withTitle("Walking").withRadialGradientColors(0xff84BC3D, 0xff5B8829).build(),
            sciChartBuilder.newPieSegment().withValue(5.2).withTitle("Bicycle").withRadialGradientColors(0xff84BC3D, 0xff5B8829).build(),
            sciChartBuilder.newPieSegment().withValue(12.3).withTitle("Metro").withRadialGradientColors(0xffe04a2f, 0xffB7161B).build(),
            sciChartBuilder.newPieSegment().withValue(3.5).withTitle("Tram").withRadialGradientColors(0xffe04a2f, 0xffB7161B).build(),
            sciChartBuilder.newPieSegment().withValue(5.9).withTitle("Rail").withRadialGradientColors(0xffe04a2f, 0xffB7161B).build(),
            sciChartBuilder.newPieSegment().withValue(9.7).withTitle("Bus").withRadialGradientColors(0xffe04a2f, 0xffB7161B).build(),
            sciChartBuilder.newPieSegment().withValue(3.0).withTitle("Taxi").withRadialGradientColors(0xffe04a2f, 0xffB7161B).build(),
            sciChartBuilder.newPieSegment().withValue(23.2).withTitle("Car").withRadialGradientColors(0xff4AB6C1, 0xff2182AD).build(),
            sciChartBuilder.newPieSegment().withValue(3.1).withTitle("Motorcycle").withRadialGradientColors(0xff4AB6C1, 0xff2182AD).build(),
            sciChartBuilder.newPieSegment().withValue(5.3).withTitle("Other").withRadialGradientColors(0xff4AB6C1, 0xff2182AD).build()
    ).build();

    Collections.addAll(surface.getRenderableSeries(), pieSeries, donutSeries);
    Collections.addAll(surface.getChartModifiers(), sciChartBuilder.newLegendModifier(legend).withShowCheckBoxes(false).withSourceSeries(pieSeries).build(), new PieChartTooltipModifier());

But if I touch on the chart I didn’t get the tooltip. As you see I have nearly copy all the code of the Example but I do not work. Where is my fault?

0 votes
7k 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.

1 vote
10k views

I’ve just downloaded the new v6 SDK and tried to use the tooltip feature both in my existing application and in the examples suite, and in both cases tooltips do not appear at all. The example suite for both .NET Framework and .NET Core crashes and the solution export feature produces a solution that does not build in Visual Studio.

The first example, 3D Charts -> Tooltips and Hit Test 3D Charts -> Series Custom Tooltips 3D Chart, crashes the example suite if I hover over a data point. The application closes with no error message.

The second example, 3D Charts -> Tooltips and Hit Test 3D Charts -> Series Tooltips 3D Chart, does not show any tooltips at all, in contrast to the same example from the v5 example suite. The application in this case does not crash, though.

In my own application the tooltip does not show whereas with the previous version of SciChart it did. I cannot see an exception raised.

0 votes
0 answers
7k views

Hello, I am using the Cross CursorModifier with axis labels and tool tips on a FastCandlestickRenderableSeries only. I have been using the CursorModifier:SnappingMode=”CrosshairToSeries” however I would like to only have the X axis of the CursorModifier snap to the nearest X data point of the series. This way the Y axis of the CursorModifier is still free to view price and hold a reference for where the Tooltip should be displayed. Any direction to the proper documentation for this functionality would be appreciated.

Thank you,

0 votes
0 answers
10k views

Hi SciChart,

Our requirement is to have polygon shapes be drawn at runtime, and to have a “rich” tooltip display for the user when the user hovers over one of these polygons.

Using a CustomRenderableSeries, we’re able to plot polygons, each as its own CustomRenderableSeries. The tooltip displays on a mouse hover when the mouse is within a few pixels of the edge of polygon, but it does not display when the mouse hover is in the middle of a polygon.

We have also explored creating CustomAnnotations of these polygonal shapes – however, the CustomAnnotation object type does not have a ‘Path’ or ‘Points’ property as is shown in the arrow shapes declared in the XAML of the ‘Annotations are Easy’ WPF example. Because we won’t know the paths of these shapes until runtime, this does not meet our requirement.

Is there a way to have tooltips appear within polygons, or a way to assign ‘Path’ data to a CustomAnnotation? Or any other ChartModifier that might suit our needs?

Thanks!
Matt

0 votes
7k views

Hello Team,

I am evaluating Sci Chart for using in our production applications. I am creating a POC for the same if it fits our requirements.

I have created a scattered chart successfully. Our next requirement is to select a part of the chart, basically, like data from this date to this date. I was trying to explore VerticalSlice Modifier for it. My purpose was that the user will place the sliders on the start date and end date and we will get those values. Can you tell me if this approach is correct or suggest a different technique, annotation or marker, any other modifier to select data between two dates?

<Grid Grid.Row="1">
        <s:SciChartSurface s:ThemeManager.Theme="BrightSpark">
            <s:SciChartSurface.ChartModifier>
                <s:ModifierGroup>
                    <s:VerticalSliceModifier Name="sliceModifier">
                        <s:VerticalSliceModifier.VerticalLines>
                            <s:VerticalLineAnnotation X1="{Binding SelectedStartDate, Mode=TwoWay}" IsEditable="True"/>
                            <s:VerticalLineAnnotation X1="{Binding SelectedEndDate, Mode=TwoWay}" IsEditable="True"/>
                        </s:VerticalSliceModifier.VerticalLines>
                    </s:VerticalSliceModifier>
                </s:ModifierGroup>
            </s:SciChartSurface.ChartModifier>
            <s:SciChartSurface.XAxis>
                <s:DateTimeAxis AxisTitle="Number of Samples (per Series)"/>
            </s:SciChartSurface.XAxis>
            <s:SciChartSurface.YAxis>
                <s:NumericAxis AxisTitle="Value"/>
            </s:SciChartSurface.YAxis>
            <s:SciChartSurface.RenderableSeries>
                <s:XyScatterRenderableSeries x:Name="scatterSeries" Stroke="OrangeRed" DataSeries="{Binding Chirps}">
                    <s:XyScatterRenderableSeries.PointMarker>
                        <s:EllipsePointMarker Width="9" Height="9" Fill="SteelBlue" Stroke="LightSteelBlue" StrokeThickness="2"/>
                    </s:XyScatterRenderableSeries.PointMarker>
                </s:XyScatterRenderableSeries>
            </s:SciChartSurface.RenderableSeries>
        </s:SciChartSurface>
    </Grid>

Thanks for the help and support

0 votes
7k views

I want to develop a rollover in my IOS application, like the example of Using RolloverModifier. However, the axis label & tooltip display of rollover in this example is static, I want to customize a the the label & tooltip that I want, .xib file or coding to develop also fine.

Can anyone help or give suggestions to my problems? Thanks.

  • Gumbo F asked 5 years ago
  • last active 2 years ago
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
11k views

I’m using Vertical Slice Modifier but, I don’t want to show Tooltip where series intersects.

How can I hide it?

1 vote
9k views

Hi, I’m a software engineer. My organization is ready to purchase your solution for our project(Android, IOS), but I have some questions:
1. Can I get a callback when the visible area on the x axis changes? This is necessary to dynamically upload data to the end of the graph when the user scrolls back.
2. Change the position of the tooltip and place in the upper corner of the chart?
Thank you for your time and hope for further cooperation.
Evgeniy Grishko, software engineer.

1 vote
0 answers
11k views

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

This question is more about WPF, but I can’t find any information how to do it.
I need to compute some information and write it in TextBlock.

Ideally If I could wrap OhlcSeriesInfo into my wrapper class. Then set this wrapper as DataContext and binding to its properties.
I rised this question on stack overflow:
https://stackoverflow.com/questions/48916897/how-to-make-wrapper-for-datatype-datacontext-in-wpf
but still no one helped me.
I don’t know why this is so hard question. Hope here I’ll find answer.

0 votes
0 answers
9k views

Hello,

I’m currently evaluating SciChart to see if it supports our needs for an application. We’re trying to have a chart that closely mimics the iOS Stock application (attachment: StockApp.PNG) but for sensor values. Our effort so far can be seen in attachment: SciChart.jpg.

  1. Inside the tooltip provided by the RolloverModifier, we only want to display the value of the Y axis – and get rid of the X axis (datetime). Is there a way to hide the X axis value and only display the Y axis value inside the tooltip? Refer to SciChart.jpg. For example, when RolloverModifier is visible, the tooltip for Turbidity line should only read “Turbidity: 2.50 NTU”, where 2.50 is the Y-axis value and NTU is the unit of measure. Notice we do not want to see “X: 28/01/18 12:24PM” at all in the tooltip.

  2. Similar to the iOS Stock app, we require a second RolloverModifier when a second finger rests on the chart. The idea is to provide a quick popover to display the difference in Y-axis value between the two RolloverModifier values. I tried adding a second instance of RolloverModifier to the SCIChartSurface however the vertical trace line would just overlap the first finger’s trace line.

There are the two major requirements I see right now in determining whether to invest in SciChart. So please let me know if they are possible. Below is the code.

    override func viewDidLoad() {
        super.viewDidLoad()

        layout()

        configXaxis(surface: sciChartSurface)
        configYaxis(surface: sciChartSurface)        
        loadDataSeriesFromCsv(csv: rlCSVToDownload!)
    }

   private func layout() {
        let margins = view.layoutMarginsGuide

        sciChartSurface = SCIChartSurface()
        sciChartSurface?.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(sciChartSurface!)

        sciChartSurface?.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
        sciChartSurface?.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
        sciChartSurface?.bottomAnchor.constraint(equalTo: margins.bottomAnchor).isActive = true
        sciChartSurface?.topAnchor.constraint(equalTo: margins.topAnchor).isActive = true
    }

    private func configYaxis(surface: SCIChartSurface!) {
        let axis = SCINumericAxis(), numericFormat = "%.02f"
        axis.textFormatting = numericFormat
        axis.cursorTextFormatting = numericFormat
        surface.yAxes.add(axis)
    }

    private func configXaxis(surface: SCIChartSurface!) {
        let axis = SCIDateTimeAxis(), datetimeFormat = "dd/MM/YY H:mm a", subDayFormat = "H:mm a"
        axis.textFormatting = datetimeFormat
        axis.subDayTextFormatting = subDayFormat
        axis.cursorTextFormatting = datetimeFormat

        surface.xAxes.add(axis)
    }

    private func addModifiers() {
        let xAxisDragmodifier = SCIXAxisDragModifier()
        xAxisDragmodifier.dragMode = .pan
        xAxisDragmodifier.clipModeX = .none

        let yAxisDragmodifier = SCIYAxisDragModifier()
        yAxisDragmodifier.dragMode = .pan

        let extendZoomModifier = SCIZoomExtentsModifier()
        let pinchZoomModifier = SCIPinchZoomModifier()

        let rolloverModifier = SCIRolloverModifier()

        let legend = SCILegendModifier()

        let groupModifier = SCIChartModifierCollection(childModifiers: [xAxisDragmodifier, yAxisDragmodifier, pinchZoomModifier, extendZoomModifier, legend, rolloverModifier])

        sciChartSurface?.chartModifiers = groupModifier
    }

   private func loadDataSeriesFromCsv(csv: CSV) {
        rlCSVConnection?.download(csv: csv, onProgress: nil, onComplete: {
            [weak self] (csv) -> (Void) in

            self?.turbDataSeries = SCIXyDataSeries(xType: SCIDataType.dateTime, yType: SCIDataType.double)
            self?.turbDataSeries.seriesName = "Turbidity"

            self?.cl2DataSeries = SCIXyDataSeries(xType: SCIDataType.dateTime, yType: SCIDataType.double)
            self?.cl2DataSeries.seriesName = "Chlorine"

            //... Populate data into DataSeries ...

            self?.turbRenderableSeries = SCIFastLineRenderableSeries()
            self?.turbRenderableSeries.isDigitalLine = true
            self?.turbRenderableSeries.dataSeries = self?.turbDataSeries
            self?.turbRenderableSeries.style.strokeStyle = SCISolidPenStyle(color: UIColor.orange, withThickness: 1)

            self?.cl2RenderableSeries = SCIFastLineRenderableSeries()
            self?.cl2RenderableSeries.isDigitalLine = true
            self?.cl2RenderableSeries.dataSeries = self?.cl2DataSeries
            self?.cl2RenderableSeries.style.strokeStyle = SCISolidPenStyle(color: UIColor.green, withThickness: 1)

            self?.sciChartSurface?.renderableSeries.add(self?.turbRenderableSeries)
            self?.sciChartSurface?.renderableSeries.add(self?.cl2RenderableSeries)

            self?.addModifiers()
        }, onFailure: nil)
    }

Thanks.

0 votes
6k 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.

0 votes
11k views

Using custom label provider I am able to format the cursor label, but still there is the name of the axis. I only want to show the value here, like “0,91” and remove the “X:” (see attached screenshots).

Thanks in advance.

override func formatCursorLabel(_ dataValue: SCIGenericType) -> String! {
    return "" // super.formatCursorLabel(dataValue)
}
0 votes
9k views

Hello,
is it possible to modify the corner radius of tooltips in SciChart Android?

  • Anna Lazar asked 6 years ago
  • last active 2 years ago
0 votes
0 answers
8k views

My company is pondering buying the SciCharts suite and using the wpf chart for one of our flagship applications. I have a couple questions about what the control supports. Do the charts support users adding a note (tooltip) to a certain point on the line chart? How it works currently is the user right clicks on the chart, types in the note that they want to display and it creates a tooltip at the current position that they clicked on. Can this happen with SCIChart’s LineChart? We also have a need for them to be able to click on a certain point on the chart and drag the marker to another point and have it show the time between the two points. The last thing we need is to be able to click on a line and show statistics for that line (min, max, average, create data, active or not, formatting formula, etc…). I looked for examples of these and could not find them. Can you tell me if these features exist or are possible to implement dynamically? Thank you.

0 votes
8k views

Looking at the documentation I’ve figured out how to style the content of the tooltip. But I can’t seem to figure out how to style the container.

You can see in the attached image the automatic blue background that matches the series. I would like to style it with our own style which is the dark background and then BorderBrush that matches the series color.

<DataTemplate x:Key="DigitalToolTipTemplate" DataType="s:XySeriesInfo">
                    <Border Style="{StaticResource BorderStyle}" BorderBrush="{Binding Stroke}">
                        <TextBlock Text="{Binding SeriesName, StringFormat='{}{0}'}" />
                    </Border>
                </DataTemplate>

This seems to style only the inner contents of the tooltip but not the whole tooltip.

Also note the BorderBrush binding (not sure if this is correct to get the series color).

Update
Now using the following code (which is working) — Now the only thing I need to figure out is what to bind for the stroke to get the series color as the border stroke.

<Style x:Key="DigitalToolTipStyle" TargetType="s:TooltipControl">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="s:TooltipControl">
                                <Border Style="{StaticResource BorderStyle}" BorderBrush="{Binding Stroke}">
                                    <ContentPresenter Content="{TemplateBinding DataContext}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
0 votes
9k views

Hello !

I have a chart displaying very accurate data and I would like the RolloverModifier to adopt the same format as my Y axis.
I want to avoid problems similar to the one on the screenshot attached. The tooltip is indicating -0 and I would like it to display something like -2.5E-6.

Thank you for your help,

Adrien

0 votes
0 answers
8k views

I am using a CursorModifier with custom template to display tool tips with cross hairs on my scatter plots. Everything works as intended until the plot gets busy with points then the tool tip only shows for a few points. I am using ResamplingMode.None on my XyScatterRenderableSeries. Any ideas? Thanks

<s:CursorModifier IsEnabled="{Binding AreTooltipsEnabled}"
                  ReceiveHandledEvents="False" 
                  ShowTooltipOn="MouseOver" 
                  ShowAxisLabels="False"
                  SourceMode="AllSeries"  
                  ShowTooltip="True"                                      
                  TooltipContainerStyle="{StaticResource CursorTooltipStyle}"
                  LineOverlayStyle="{DynamicResource CursorLineStyle}"
                  UseInterpolation="True"/>
1 vote
11k views

Hi

I want to show tooltips on point markers only.
I have FastMountainRenderableSeries with EllipsePointMarker. I don’t want to show tooltip on series, on PointMarker only so can’t use TooltipModifier.

I tried to add tooltip from XAML like this:

<sciChart:EllipsePointMarker sciChart:TooltipModifier.IncludeSeries="True">
    <sciChart:EllipsePointMarker.ToolTip>
        <ToolTip Padding="0">
            ...
        </ToolTip>
    </sciChart:EllipsePointMarker.ToolTip>
</sciChart:EllipsePointMarker>

But it is not showing.

Is it possible to achieve this?

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

Hello,
I am currently evaluating the chart library, and plotting a FastLineRenderableSeries with an Ellipse PointMarker.
This displays exactly the graph I want. However, I would like that when the user hovers over a point, the point would highlight and he can see a tooltip showing what is the exact X value and the exact Y value.
Example of what I would like : http://www.highcharts.com/demo/line-basic
Would be even better if when hovering over the line the “nearest” actual point were highlighted with the tooltip.
I have tried a quick search and haven’t come up with the solution yet, note I am new to the library.
Thanks

0 votes
14k views

I am showing tooltip with CursorModifier. My tooltip bigger than SciChartSurface and I am using ClipModifierSurface=”False” in order to show whole tooltip. But in this case axis labels and scroll bar are on top of tooltip.
Described problem can be seen on Featured Apps > Scientific Charts > Oscilloscope Demo.
Is there any way to bring tooltip on top of chart surface?

Thanks
Samvel

1 vote
12k views

Hi,

I’m using the TooltipModifier to show a tooltip for a series.

The tooltip is defined globally in the ‘ChartModifier’ section. However I have multiple series, and I would only like to show the tooltip for a specific series, and not the others.

How can I achieve this?

Thanks.

  • Yonatan D asked 8 years ago
  • last active 4 years ago
Showing 1 - 50 of 56 results

Try SciChart Today

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

Start TrialCase Studies