Forums

Hello,

I am experiencing an issue with the BoxAnnotation in SciChart where the precision of the box’s boundaries does not accurately match the data points it is supposed to represent. When dynamically creating a BoxAnnotation to highlight a range of values on a chart, the upper boundary (y2) is set to match the maximum value within the specified range. Despite the calculation seeming accurate, the rendered annotation’s top edge is visually lower than the top of the highest column it encompasses, creating a slight discrepancy. In my application, I am creating a lot of charts, and this issue occurs only on charts with a big data range.

Environment:

SciChart Version: 3.2.532
Browser: Chrome

Attaching code snippet on jsfiddle:
https://jsfiddle.net/c9dekx6v/2/

Regards,
Dmytro

Hi

I would like to do some logic after zooming in but can not find to witch event I should subscribe or overwrite ?

Hi Andrew,

I have 2 independent questions,

Q1.
I have been working with uniform heatmap and I need a way to fix the aspect ratio to 1, for all resize, zoom events, is there an option in heatmap to fix an aspect ration? Please see the attached video
https://youtu.be/obhH6KLExYw

Q2.
I am trying to implement a lasso select method to select and highlight the heatmap data. I did not find lasso select in the documentation hence I went ahead and implemented my own method.

I am drawing an svg using D3 (offsetX and offsetY variables) and then adding it to the annotation as you will see in the video and trying to get all the hitTest data inside the lasso.

If I use the customAnnotation then heatmap is able to draw correct size and location of the SVG
customAnnotation:
https://youtu.be/gL34sAbxYSE

But it does not pan and zoom with the plot data. after looking through documentation I came across OverviewCustomResizableAnnotation which seems designed for zooming and panning with the data.

But while using the OverviewCustomResizableAnnotation the SVG size keeps changing during the update and is not located at the correct location relative to the data.

sciChartSurfaceRef.current.annotations.add(
new OverviewCustomResizableAnnotation({
id: "lassoSVG",
x1: shortestXinData,
y1: shortestYinData,
isEditable: false,
isSelected: false,
yCoordinateMode: ECoordinateMode.DataValue,
xCoordinateMode: ECoordinateMode.DataValue,
verticalAnchorPoint: EVerticalAnchorPoint.Top,
horizontalAnchorPoint: EHorizontalAnchorPoint.Left,
svgString: new XMLSerializer().serializeToString(svg.node())
})
)
OverviewCustomResizableAnnotation:
https://youtu.be/-AOJ9V3l-xI

Thanks,

Pramod

I know there was a bit of mention in the 2021 end of year announcement about porting code over to C++ which would enable there to be future builds of SciChart for WinUI or other platforms… I’m just curious if there is any timeline / estimated timeframe that scichart would have WinUI 3 charts?

Dear SciChart team,

We have been subscribing SciChart WPF 2D Pro for a few years, usually I made some WPF user controls which have SciChartSurface in it, and we use it to display some data in the form of charts. Since my colleagues do not have the developer’s license, so they can’t see these charts on their laptop when they were debugging the solution, but it was fine, they do not care the charts.

Last week I updated the SciChart on my laptop, it works fine on my PC. but it always crashed when my colleagues debugging the solution.

The error info is:
Cannot attach VerticalLineAnnotation, because it is already used.

The call stack is full of SciChart’s calling

at SciChart.Charting.ChartModifiers.VerticalSliceModifier.sfp(VerticalLineAnnotation hhv)
at SciChart.Charting.ChartModifiers.VerticalSliceModifier.sge()
at SciChart.Charting.ChartModifiers.VerticalSliceModifier.OnAttached()
at SciChart.Charting.ChartModifiers.ModifierGroup.geq(IChartModifier gwl)
at SciChart.Core.Extensions.EnumerableExtensions.ForEachDo[T](IEnumerable1 enumerable, Action1 operation)
at SciChart.Charting.ChartModifiers.ModifierGroup.gep(IEnumerable`1 gwk)
at SciChart.Charting.ChartModifiers.ModifierGroup.OnAttached()
at SciChart.Charting.Visuals.SciChartSurface.sjj(IChartModifier anx)
at SciChart.Charting.Visuals.SciChartSurface.sht()
at SciChart.Charting.Visuals.SciChartSurface.OnSciChartSurfaceLoaded()
at SciChart.Charting.Visuals.SciChartSurfaceBase.gtm(Object aqg, RoutedEventArgs aqh)
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.RaiseEvent(RoutedEventArgs e)
at System.Windows.BroadcastEventHelper.BroadcastEvent(DependencyObject root, RoutedEvent routedEvent)
at System.Windows.BroadcastEventHelper.BroadcastLoadedEvent(Object root)
at MS.Internal.LoadedOrUnloadedOperation.DoWork()
at System.Windows.Media.MediaContext.FireLoadedPendingCallbacks()
at System.Windows.Media.MediaContext.FireInvokeOnRenderCallbacks()
at System.Windows.Media.MediaContext.RenderMessageHandlerCore(Object resizedCompositionTarget)
at System.Windows.Media.MediaContext.RenderMessageHandler(Object resizedCompositionTarget)
at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
at System.Windows.Threading.ExceptionWrapper.TryCatchWhen(Object source, Delegate callback, Object args, Int32 numArgs, Delegate catchHandler)
at System.Windows.Threading.DispatcherOperation.InvokeImpl()
at System.Windows.Threading.DispatcherOperation.InvokeInSecurityContext(Object state)
at MS.Internal.CulturePreservingExecutionContext.CallbackWrapper(Object obj)
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 MS.Internal.CulturePreservingExecutionContext.Run(CulturePreservingExecutionContext executionContext, ContextCallback callback, Object state)
at System.Windows.Threading.DispatcherOperation.Invoke()
at System.Windows.Threading.Dispatcher.ProcessQueue()
at System.Windows.Threading.Dispatcher.WndProcHook(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 System.Windows.Threading.ExceptionWrapper.TryCatchWhen(Object source, Delegate callback, 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.Application.RunDispatcher(Object ignore)
at System.Windows.Application.RunInternal(Window window)
at System.Windows.Application.Run(Window window)
at System.Windows.Application.Run()
at ABB.Motion.WorkBench.App.Main()

Hello, I need to use tooltips to display information to users. However, after using the tooltip, there will be a jam after the tooltip appears and when zooming. How can I optimize the performance.

The following is the code. I use the js example: “Load 500 Series x 500 Points Performance Demo” for transformation

import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { EllipsePointMarker } from "scichart/Charting/Visuals/PointMarkers/EllipsePointMarker";
import {
  RolloverModifier,
  TRolloverTooltipDataTemplate
} from "scichart/Charting/ChartModifiers/RolloverModifier";
import { ZoomPanModifier } from "scichart/Charting/ChartModifiers/ZoomPanModifier";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { SciChartSurface } from "scichart";
import {
  IXyDataSeriesOptions,
  XyDataSeries
} from "scichart/Charting/Model/XyDataSeries";
import { NumberRange } from "scichart/Core/NumberRange";
import { EAutoRange } from "scichart/types/AutoRange";
import { convertRgbToHexColor } from "scichart/utils/convertColor";
// eslint-disable-next-line
SciChartSurface.useWasmFromCDN();

const divElementId = "scichart-root";

const color = "#368BC1";

const SERIES = 1500;
const POINTS = 188;


const drawExample = async (updateTimeSpans) => {
  const { sciChartSurface, wasmContext } = await SciChartSurface.create(
    divElementId,{ widthAspect: 3, heightAspect: 2}
  );
  const xAxis = new NumericAxis(wasmContext, {
    visibleRange: new NumberRange(0, POINTS),
    autoRange: EAutoRange.Never
});
sciChartSurface.xAxes.add(xAxis);
const dataSeriesArray= new Array(SERIES);;
const rendSeriesArray=new Array(SERIES);
const yAxis = new NumericAxis(wasmContext, {
    visibleRange: new NumberRange(-5000, 5000),
    autoRange: EAutoRange.Never
});
// yAxis.labelProvider.numericFormat = ENumericFormat.Decimal_0;
sciChartSurface.yAxes.add(yAxis);
for (let i = 0; i < SERIES; i++) {
  const dataSeries= new XyDataSeries(wasmContext);
  const rendSeries= new FastLineRenderableSeries(wasmContext, {
      dataSeries,
     stroke: color,
      strokeThickness: 3,
      pointMarker: new EllipsePointMarker(wasmContext, {
        width: 5,
        height: 5,
        strokeThickness: 2,
        fill: "white",
        stroke: color
      })
  });
  dataSeriesArray[i] = dataSeries;
  rendSeriesArray[i] = rendSeries;
sciChartSurface.renderableSeries.add(rendSeries);
}
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier(), new ZoomPanModifier(), new MouseWheelZoomModifier(),new RolloverModifier(wasmContext));
const loadPoints = () => {
  const newTimeSpans=[];

  // Start counting Points generation time
  const generateTimestamp = Date.now();

  const xValuesArray = new Array(SERIES);
  const yValuesArray = new Array(SERIES);
  const strokeArray =  new Array(SERIES);
  for (let i = 0; i < SERIES; i++) {
      // Allocate data arrays
      xValuesArray[i] = new Array(POINTS);
      yValuesArray[i] = new Array(POINTS);

      // Clear data, if any
      dataSeriesArray[i].clear();

      // Generate stroke
      const r = Math.random();
      const g = Math.random();
      const b = Math.random();
      strokeArray[i] = convertRgbToHexColor(r, g, b);

      // Generate points
      let prevYValue = 0;
      for (let j = 0; j < POINTS; j++) {
          const curYValue = Math.random() * 10 - 5;

          xValuesArray[i][j] = j;
          yValuesArray[i][j] = prevYValue + curYValue;

          prevYValue += curYValue;
      }
  }

  // Add the first time span: Generating 1M data points
  newTimeSpans.push({
      title: "Generate 500x500 Data Points",
      durationMs: Date.now() - generateTimestamp
  });

  // Start counting batch append time
  const appendTimestamp = Date.now();
  for (let i = 0; i < SERIES; i++) {
      dataSeriesArray[i].appendRange(xValuesArray[i], yValuesArray[i]);
      rendSeriesArray[i].stroke = strokeArray[i];
  }

  // Add the second time span: Generation of data point
  newTimeSpans.push({
      title: "Append 500x500 Data Points",
      durationMs: Date.now() - appendTimestamp
  });

  // Subscribe to sciChartSurface.rendered event,
  // and calculate time duration between the append and
  // the first frame after it
  const firstFrameTimestamp = Date.now();
  let frameIndex = 0;
  let nextFramesTimestamp;
  const handler = () => {
      if (frameIndex === 0) {
          // Add the third time span: Render the first frame
          newTimeSpans.push({
              title: "Render the frame",
              durationMs: Date.now() - firstFrameTimestamp
          });
          nextFramesTimestamp = Date.now();
      } else {
          // Unsubscribe from sciChartSurface.rendered
          updateTimeSpans(newTimeSpans);
          sciChartSurface.rendered.unsubscribe(handler);

          // Zoom extents at the end of performance measurement
          sciChartSurface.zoomExtents();
      }
      setTimeout(sciChartSurface.invalidateElement, 0);
      // Increment frame index
      frameIndex++;
  };
  sciChartSurface.rendered.subscribe(handler);
};
  loadPoints()
};

drawExample();

Following the “How to Template the Axis Title” sample and using a simple TextBlock with TextWrapping=”Wrap” I am seeing strange resizing of the main chart elements especially with a scrollbar.

The attached image shows an example app (code available).

The first chart is normal (title clipped).
The second chart has the wrapping textblock and a scrollbar. The scrollbar is off the edge, the chart view area is off the edge. The entire axis label is still not visible (“Lorem ipsum dolor sit amet, consectetur”)
The third chart has no scrollbar so fits elements on the window, but still does not show all text.

The components creeping offscreen is the big problem I cannot figure out how to fix. Please

Note also happens in v7

Hi Folks,

Wanted to ensure I’m working in the right direction here. Requirement is to add inline series labels on the plot surface. It’s an awkward requirement at times, but it keeps coming up with because other providers do this sometimes.

I’ve been playing with the examples of using data labels ( https://github.com/ABTSoftware/SciChart.JS.Examples/blob/master/Examples/src/components/Examples/Charts2D/TooltipsAndHittest/UsingVerticalSliceModifier/index.tsx ).

This might work. It’s a little strange since I only need to show at most one label per series. So I use the data label provider I assume and have to manually space them along the index range.

The only alternative I’m aware of is the annotations api, which of course is quite robust and probably a little too fancy for this case.

Appreciate any thoughts on the approach here — thanks!

EDIT: Attached very contrived example. The idea is to supply a label to name the series inline (apparently a legend is not sufficient), but in a way that is reasonably useful visually (similar to the spacing capabilities in the data labels api). The text would be some piece of metadata that is derived from the series (or at least has a 1:1 relationship with the series).

Hello,

I just purchased this library 2 days ago, and my first impression is WOW! Very happy with my purchase for my small team. That being said I have a unique design requirement and I’m struggling to figure out how to resolve.

Our app utilizes a cursor indicator in the form of a vertical line, this indicator is used as a visual reference and synced across multiple charts. The behavior needs to be similar to how a RollOver modifier works, however the vertical line needs to stay in place, when the user is not “Mouse – Left Down”. Because the RollOver indicator goes away when not hovering over the chart, I decided to make a custom mouse modifier.

Essentially I created a “vertical line annotation” then disabled the dragging (want it to be moved only by mouse cursor movement, and not requiring the user to drag). Made a custom mouse modifier, where OnMouseModiferDown I set a bool flag, then OnMouseMoodiferMove I get the mouse cursor position and update the X1 binding of the cursor, finally OnMouseModiferUp I set the bool flag to false.

The Issue: With my custom mouse modifier the Vertical Line annotation lags the mouse position, It almost looks like there is some sort of smoothing applied to the movement? Is there a way to turn this effect off or reduce it? Here is a link to the behavior to highlight what I’m seeing.
Video of Behavior

My Code is given below.

Xaml

<local:mouseMove ExecuteOn="MouseMove"/>

<s:VerticalSliceModifier IsEnabled="True">
    <s:VerticalSliceModifier.VerticalLines>
        <s:VerticalLineAnnotation IsEditable="False" LabelPlacement="Axis" ShowLabel="False" X1="{Binding cursorPoint Mode=TwoWay}" Style="{StaticResource sliceStyle}" />
    </s:VerticalSliceModifier.VerticalLines>
</s:VerticalSliceModifier>

C#, Mouse Modifier (MouseMove)

public class mouseMove : XAxisDragModifier
    {
        private bool moveCursor { get; set; }
        public override void OnModifierMouseDown(ModifierMouseArgs e)
        {
            if (e.MouseButtons == MouseButtons.Left)
            {
                moveCursor = true;
            }
        }
        public override void OnModifierMouseUp(ModifierMouseArgs e)
        {
            if (e.MouseButtons == MouseButtons.Left)
            {
                moveCursor = false;
            }
        }
        public override void OnModifierMouseMove(ModifierMouseArgs e)
        {
            if ((Keyboard.Modifiers == ModifierKeys.Control))
            {
                //This is my keybind for the RuberBandXY, ignore this mouse event if Ctrl + Left Mouse Down
            }
            else
            {
                if (moveCursor)
                {
                    // Get mouse point
                    var mousePoint = e.MousePoint;

                    mousePoint = ParentSurface.RootGrid.TranslatePoint(mousePoint, ParentSurface.ModifierSurface);
                    var xDataValue = ParentSurface.XAxis.GetDataValue(mousePoint.X);
                    ParentSurface.Annotations[0].X1 = xDataValue;
                }

            }
        }
    }

Hi,
i have some candles and i want to force the chart for removing candles with
open = Double.NaN
high = Double.NaN
low = Double.NaN
close = Double.NaN
openTime – special day (timestamp)

What I see:

Hi,

I am creating an application where, we fetch data and display it in multiple heatmaps. The user can manipulate the heatmaps with changing colormap or changing ranges on the colormap.

Data from these multiple heatmaps is composited to another chart for visualization.

I was able to get a reference to the series, but adding the series to another chart errors with a message:

Invalid operation in sciChartSurface.attachSeries, this series has already been attached to a SciChartSurface. Please detach it from a SciChartSurface before attaching to another
at BaseRenderableSeries.onAttach (BaseRenderableSeries.js:634:1)
at __webpack_modules__../node_modules/scichart/Charting/Visuals/SciChartSurface.js.SciChartSurface.attachSeries (SciChartSurface.js:1385:1)

of course this means we cannot attach the same series to two different charts, but is there a way around this such as deepcloning?

renderable series: attached image

sample code: attached image

Hello,
I have a polar chart in my wpf application and I want to get data value from pixel coordinates, once the user has
clicked on scichart surface. This is what I tried:

   mouseClick = (s, arg) =>
        {
            var mousePoint = arg.GetPosition((UIElement)this.sciChartSurface.GridLinesPanel);

    //From cartesian to polar conversion
            double xpolar = Math.Atan(mousePoint2.Y / mousePoint2.X);
            double ypolar = Math.Sqrt(Math.Pow(mousePoint2.X, 2) + Math.Pow(mousePoint2.Y, 2));

            double a = sciChartSurface.RenderableSeries[_trace_index].XAxis.GetCurrentCoordinateCalculator().GetDataValue(xpolar);
            double b = sciChartSurface.RenderableSeries[_trace_index].YAxis.GetCurrentCoordinateCalculator().GetDataValue(ypolar);
};

This code gets mouse point coordinates, then it converts pixel coordinates to polar, and then (a,b) data are obtained with
GetCurrentCoordinateCalculator().GetDataValue(), but a and b have some strange values. I’ve tried just the opposite (from data value to pixel coordinate using GetCoordinate()), but it still doesn’t work. Any ideas? Is it possible to get data from pixel coordinates in polar chart?

Thanks in advance,
Juan

Hi,

I am using the scichart for WPF an came across a problem. I am trying to create a thumbnail image of a size 300×200 pixels of my chart. I have tried using the ExportToStream method with option of specifying the size output, but that creates a smaller resolution image of my chart. I was hoping that it will resize the chart to the desired size and then make an image.
So I tried a second option which was to put the chart in a user control of a certain size and then use the RenderTargetBitmap to render the user control in an image. That resulted in a partial chart without the chart lines. Take a look at the attached?

Any ideas how to make the chart to be rendered in memory in full for a certain size?

Kind regards,
Boštjan

I have created a chart that displays real-time instrument data with a sample arriving every 10ms or so. I am displaying this with a CateoryDateTimeAxis:

                <!--  Create an X Axis  -->
                <s:SciChartSurface.XAxis>
                    <s:CategoryDateTimeAxis  MinHeight="50" AutoRange="Always" VisibleRange="{Binding XAxisVisibleRange, Mode=TwoWay}"
                            AxisTitle="Time" DrawMinorGridLines="False" DrawMinorTicks="False"  TextFormatting="hh:mm:ss.ss">
                    </s:CategoryDateTimeAxis>
                </s:SciChartSurface.XAxis>

My probem is that the TextFormatting is ignored and I get labels in the form HH:mm which is not much use. Is there a way round this?

Secondly if I try to use a DateTimeAxis to show the actual times (with any gaps) the automatic scaling resets the axis to cover about two days.

Any guidance would be appreciated.

Mike

Hello,
I’ve been looking for the documentation of how to customize the look of the chart. I have a black/dark gray checker pattern that seems to be the default. I would like to:
1. Change the background to white, no checkerboard pattern
here is the documentation for chart background but it does not show me how to change it to white. https://www.scichart.com/documentation/ios/v2.x/webframe.html#The%20SciChartSurface%20Type.html
I have found through experimentation the I can call

surface.backgroundColor

But that just changes the axis background color

2. Make the text larger on the axis.
here is the documentation for the axis https://www.scichart.com/documentation/ios/v2.x/webframe.html#Adding%20an%20Axis%20to%20a%20SciChartSurface.html
I see these lines that were provided but they won’t compile because Xcode doesn’t know what defaultFontSize is and there are no other references to it and I still don’t see a way to set the size.

textFormat.fontName = SCSFontsName.defaultFontName
textFormat.fontSize = SCSFontSizes.defaultFontSize

I think it would be helpful to create a walkthrough for iOS that shows how to customize the background and axis. I’ve looked through the samples provided but the files are huge and I get lost trying to figure it out.
Thanks,
Warren

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.