Pre loader


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

Currently I’m using line series to render data of two different types. But when using legend, a separate entry is made for each line. I want a single legend for each data type.

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

        sciChartSurface.xAxes.add(new SciChart.NumericAxis(wasmContext));
        sciChartSurface.yAxes.add(new SciChart.NumericAxis(wasmContext));

        for (let i = 0; i < 5; i++) {
            const xValues = [1, 2, 3, 4, 5];
            const yValues = => x * (i + 1));
            const dataSeries = new SciChart.XyDataSeries(wasmContext, { xValues, yValues, dataSeriesName: "file 1" });

            const lineSeries = new SciChart.FastLineRenderableSeries(wasmContext, {
                stroke: "red",
                strokeThickness: 2,

        for (let i = 0; i < 5; i++) {
            const xValues = [1, 2, 3, 4, 5];
            const yValues = => x * (i + 10));
            const dataSeries = new SciChart.XyDataSeries(wasmContext, { xValues, yValues, dataSeriesName: "file 2" });

            const lineSeries = new SciChart.FastLineRenderableSeries(wasmContext, {
                stroke: "blue",
                strokeThickness: 2,

        const legendModifier = new SciChart.LegendModifier({
            placement: SciChart.ELegendPlacement.TopRight,
            orientation: SciChart.ELegendOrientation.Vertical,
            showLegend: true,
            showCheckboxes: true,
            showSeriesMarkers: true,

        legendModifier.getLegendData = () => {
            return [{
                seriesName: "Grouped Lines",
                stroke: "#000000",
                seriesType: "LineSeries"

0 votes
0 answers


I am working on an application that involves realtime graphing of large amounts of data. Plotting the data in realtime is working flawlessly, except the legend checkboxes associated with the DataSeries are quite temperamental.

By temperamental, I mean that attempting to toggle a checkbox in the legend (via clicking the checkbox), only works sporadically. Resultantly, the users are required to click the checkbox multiple times until the checkbox is successfully toggled.

This only occurs while plotting realtime data, and I’m assuming it is related to the UI thread being bogged down.

I’ve tried setting the SciChartSurface.RenderPriority to low, but this failed to fix the issue. I’m unsure if there is anything you guys can do on your side; however, I figured I’d reach out just in case. Any tips would be much appreciated!

0 votes
0 answers


How can I stop the scrolling movement of a surface by inertia?
I don’t want to turn off the feature altogether by setting the inertial attribute to false, but I want to stop the scrolling that is in motion.
Is there any way to do this?

Looking forward to your reply. thx

0 votes
0 answers

I have real-time chart. It updates and X-axis always moving. When I added annotation like VerticalLineAnnotationViewModel to chart I choose the certain point on X-axis and after adding annotation it start moving with X-axis. It is OK.
But now I need to add VerticalLineAnnotationViewModel with calculated point on X-axis. I will be looks like constant static vertical line on moving chart. Can I make something like this?

0 votes


Is there an equivalent JavaScript way to check if the hardware acceleration is enabled?

This snippet is from the WPF documentation.

Hardware-accelerated rendering check
if (sciChartSurface.RenderSurface.GetType() == typeof (VisualXcceleratorRenderSurface))
// Hardware-accelerated rendering is enabled!

If there is no hardware accelration in the browser available we do not want to render the SciChart surface.


0 votes
0 answers

am implementing a context menu that has the option to export screen shots of the chart as jpeg.
As soon as i click on the context menu, I loose the cursor modifier.

Possible to export/print the chart with the cursors with the contextmenu??


  • P S asked 7 days ago
0 votes

SciChartOne and sciChartTwo are bound to each other through AxisTitle.

However, I now need to display only the modified AxisLabelContainerStyle and AxisLabelTemplate when the mouse cursor is on SciChartOne. I noticed that besides the XAxis setting’s Style, there is also a default Style present, resulting in an orange label with a default green label underneath.

Could you please advise on how to completely override the green label when the mouse cursor is selected on this chart for SciChartOne?

Additionally, if the mouse cursor is not selected on this chart, I would like the XAxis to display a blue label.

Chart Code:(Both are the same)

                <Style x:Key="CursorLineStyle" TargetType="Line">
                    <Setter Property="StrokeThickness" Value="2"></Setter>
                    <Setter Property="Stroke" Value="Red"></Setter>
                    <Setter Property="StrokeDashArray" Value="2 2"></Setter>
                <Style x:Key="CursorModAxisLabelStyle" TargetType="s:AxisLabelControl">
                    <Setter Property="Background" Value="#AAFF6600"></Setter>
                    <Setter Property="BorderBrush" Value="#FFFF6600"></Setter>
                    <Setter Property="BorderThickness" Value="1"></Setter>
                <DataTemplate x:Key="CursorModAxisLabelTemplate" DataType="s:AxisInfo">
                        <TextBlock Foreground="White" FontFamily="Arial" FontSize="11" Margin="2" Text="{Binding DataValue, StringFormat='{}{0:0.00}'}"></TextBlock>

                <s:NumericAxis AxisTitle="{Binding XAxisTitle}" s:CursorModifier.AxisLabelContainerStyle="{StaticResource CursorModAxisLabelStyle}" s:CursorModifier.AxisLabelTemplate="{StaticResource CursorModAxisLabelTemplate}" VisibleRange="{Binding SharedXVisibleRange, Mode=TwoWay}"></s:NumericAxis>
                <s:ModifierGroup DataContext="{Binding Path=DataContext, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}}}" s:MouseManager.MouseEventGroup="myCustomGroup">
                    <s:RubberBandXyZoomModifier IsEnabled="{Binding EnableZoom}"></s:RubberBandXyZoomModifier>
                    <s:ZoomPanModifier IsEnabled="{Binding EnablePan}" ClipModeX="None"></s:ZoomPanModifier>
                    <s:LegendModifier ShowLegend="True" Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Center"></s:LegendModifier>
                    <s:RolloverModifier ShowTooltipOn="MouseHover"></s:RolloverModifier>
                    <s:CursorModifier LineOverlayStyle="{StaticResource CursorLineStyle}"></s:CursorModifier>
                    <s:XAxisDragModifier DragMode="Pan"></s:XAxisDragModifier>
                    <s:YAxisDragModifier DragMode="Scale"></s:YAxisDragModifier>
0 votes

One of our users have a setup where they have a VM with very little graphics capabilities and it appears that when we open one of our SciChart panels for the first time, it takes about 4 minutes for everything to populate. The next time, it only takes a couple seconds as expected. This is a bit of a long shot question, but have you ever seen such an issue on any sort of machine? I’ve attached the settings we use for the VisualXcelleratorEngine.

Thanks for any help!

0 votes

We were using wpf version prior to 6, we just purchased new license and downloaded latest, but we found the HitTest api is gone, below is our code, it tries to figure out the line being clicked and get its data series.
Could you please let us know how to replace HitTest api?


private void ChartPointClicked(object sender, MouseButtonEventArgs e)
e.Handled = true;

        Point mousePoint = e.GetPosition(Chart.GridLinesPanel as UIElement);
        double datapointRadius = 8;
        bool useInterpolation = false;
        HitTestInfo result;
        if (LineSeries.DataSeries != null)
            result = LineSeries.HitTest(mousePoint,datapointRadius, useInterpolation);
        else if (BoxSeries.DataSeries != null)
            result = BoxSeries.HitTest(mousePoint, datapointRadius, useInterpolation);

        if (!result.IsHit)

        if (result.DataSeriesIndex <= Events.Count)
            List<wExportEvent> runs = new List<wExportEvent>();
            runs = Events.Select(x => x.Wsdl).ToList();
            OpenRunSummary(runs, result.DataSeriesIndex);
  • sally an asked 2 weeks ago
  • last active 7 days ago
0 votes


I am trying to make my xAxes values to be in datetime, specifically i want to try and get the seconds since my graph will be 20 seconds worth of data.

I checked the Javascript examples however all of them resulted in a wrong date

            // ? Getting start Date
            const startDate = new Date(timestamp).getTime()
            // ? yValues Array size
            const totalPoints = yValues.length
            // ? Getting end Date
            const endDate = startDate + (totalPoints - 1) * 64
            // ? xValues Array. startDate + i * 64 ms
            const xValues = Array.from({ length: totalPoints }, (_, i) => startDate + i * 64)

            // ? xAxes
            const xAxes = new CategoryAxis(wasmContext, {
                defaultXStart: startDate,
                defaultXStep: 64,
                defaultXEnd: endDate,
                labelProvider: new SmartDateLabelProvider(),
                axisAlignment: EAxisAlignment.Bottom,
                autoRange: EAutoRange.Always,
                drawMajorGridLines: false,
                drawMinorGridLines: false,
            xyDataSeries = new XyDataSeries(wasmContext, { xValues, yValues })

– xValues array consists of 320 values from start date to end date going up by 64ms
– Yes all the values of xValues are correct, console logged and checked them manually
– I tried DateTimeNumericAxis but it resulted in the same thing as the below screenshot

0 votes

I would like to contact you about a crash.
I’m getting a crash on the line below. What is the cause?

ExtremeResamplersWrapper.h – Line 74 (EXC_BAD_ACCESS KERN_INVALID_ADDRESS)
ExtremeResamplingHelpersWrapper::MergeIndices(std::__1::vector<int, std::__1::allocator<int>>&, int, int, int*)

The issue seems to be related to a ResamplingMode, should I turn it off?
I sometimes apply separate formulas to certain axes, is this because of this? -> ex) Logarithmic Axis

Your answer would be greatly appreciated.

Below is a stacktrace.

0  SciChart                       0x901b4 ExtremeResamplingHelpersWrapper::MergeIndices(std::__1::vector<int, std::__1::allocator<int>>&, int, int, int*) + 74 (ExtremeResamplersWrapper.h:74)
1  SciChart                       0xa73c4 -[ResamplerDateDouble execute:resampledYValues:resampledY1Values:resampledIndices:xColumn:yColumn:y1Column:resamplingArgs:resamplingArgs1:] + 4040 (
2  SciChart                       0x1d110 -[SCIOhlcRenderableSeriesBase p_SCI_updateOhlcRenderPassData:dataSeries:resamplingMode:] + 137 (
3  SciChart                       0x1cd88 -[SCIOhlcRenderableSeriesBase internalUpdateRenderPassData:dataSeries:resamplingMode:] + 111 (
4  SciChart                       0x107480 -[SCIRenderableSeriesBase updateRenderPassDataWithXAxis:yAxis:renderPassState:] + 478 (
5  SciChart                       0xf3fb0 -[SCIRenderSurfaceRenderer p_SCI_updateSeriesRenderPassData:xAxes:yAxes:renderPassState:] + 254 (SCIRenderSurfaceRenderer.m:254)
6  SciChart                       0xf3964 -[SCIRenderSurfaceRenderer p_SCI_updateCoreData:renderPassState:viewportSize:] + 175 (SCIRenderSurfaceRenderer.m:175)
7  SciChart                       0xf34b4 -[SCIRenderSurfaceRenderer p_SCI_renderLoop:assetManager:renderPassState:] + 101 (SCIRenderSurfaceRenderer.m:101)
8  SciChart                       0xf3364 -[SCIRenderSurfaceRenderer onDrawWithContext:andAssetManager:] + 95 (SCIRenderSurfaceRenderer.m:95)
9  SciChart                       0x45980 -[SCIRenderSurfaceDrawable2D drawFrameIn:withDrawableSize:] + 66 (
10 SciChart                       0x7270c -[SCITwisterRendererBase drawFrameIn:withDrawableSize:] + 105 (
11 SciChart                       0x2bd70 -[SCIMetalRenderSurfaceBase draw] + 134 (SCIMetalRenderSurfaceBase.m:134)
12 QuartzCore                     0x7e044 CA::Layer::layout_and_display_if_needed(CA::Transaction*) + 416
13 QuartzCore                     0xd90e0 CA::Context::commit_transaction(CA::Transaction*, double, double*) + 464
14 QuartzCore                     0x4e028 CA::Transaction::commit() + 648
15 QuartzCore                     0x97d7c CA::Transaction::flush_as_runloop_observer(bool) + 88
16 UIKitCore                      0xb9ff4 _UIApplicationFlushCATransaction + 52
17 UIKitCore                      0xb776c _UIUpdateSequenceRun + 84
18 UIKitCore                      0xb73b0 schedulerStepScheduledMainSection + 172
19 UIKitCore                      0xb8254 runloopSourceCallback + 92
20 CoreFoundation                 0x56834 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__ + 28
21 CoreFoundation                 0x567c8 __CFRunLoopDoSource0 + 176
22 CoreFoundation                 0x54298 __CFRunLoopDoSources0 + 244
23 CoreFoundation                 0x53484 __CFRunLoopRun + 828
24 CoreFoundation                 0x52cd8 CFRunLoopRunSpecific + 608
25 GraphicsServices               0x11a8 GSEventRunModal + 164
26 UIKitCore                      0x40a90c -[UIApplication _run] + 888
27 UIKitCore                      0x4be9d0 UIApplicationMain + 340
28 UIKitCore                      0x638384 keypath_get_selector_hoverStyle + 11024
  • cha cha asked 2 weeks ago
  • last active 1 week ago
0 votes
0 answers

I am using Scichart for EEG graph. It generally works very well. But now and then I see these messages:

[ANR Warning]onDraw time too long, this =com.scichart.drawing.canvas.RenderSurface{e7849f V.ED….. ……I. 0,0-2198,864}time =407 ms

This is running on Ulefone Armor 23 Ultra and has MediaTek 8020 processor. So, fairly OK processor. Also the total use of the CPU is never above 50%.

Is there anything I can do to diagnose the issue here?

0 votes
0 answers
<s:DataPointSelectionModifier Name="PointMarkersSelectionModifier"
                              SelectionStroke="red" />
<s:MouseWheelZoomModifier IsEnabled="True" />
<s:RubberBandXyZoomModifier IsEnabled="False" />

I am developing in a wpf environment.
When first creating a chart, DataPointSelectionModifier was added in xaml. And every time specific data was created, I manually added XyScatterRenderableSeries to the series.

public static XyScatterRenderableSeries SetChartDataFotScatter(
    double x, double y,
    NumericAxis p_xaxis,
    NumericAxis p_yaxis,
    Brush color = null,
    Brush sel_color = null,
    MyMetadata selected = null)
    Color blue = color == null ? (Color)Application.Current.FindResource("Blue") : ((SolidColorBrush)color).Color;
    Color red = sel_color == null ? (Color)Application.Current.FindResource("Red") : ((SolidColorBrush)sel_color).Color;

    ///차트 생성
    var scatter = new XyScatterRenderableSeries();

    ///기본 marker
    EllipsePointMarker marker = new EllipsePointMarker() { Width = 10, Height = 10, StrokeThickness = 1, Opacity = 0.6 };

    ///MyMetadata에 의한 속성 값 변경시 특수하게 작동
    if (selected != null)
        Binding binding            = new Binding("IsChecked");
        binding.Source             = selected;
        binding.Converter          = ScatterCheckToColor;
        binding.ConverterParameter = blue;
        marker.SetBinding(BasePointMarker.FillProperty, binding);
        marker.SetBinding(BasePointMarker.StrokeProperty, binding);
        marker.Fill = blue;
        marker.Stroke = blue;

    scatter.PointMarker = marker;

    ///선택시 marker style
    scatter.SelectedPointMarker = new EllipsePointMarker() { Width = 10, Height = 10, Fill = red, Stroke = red, StrokeThickness = 1, Opacity = 0.6 };

    ///축 적용
    scatter.XAxisId = p_xaxis.Id;
    scatter.YAxisId = p_yaxis.Id;

    ///데이터 생성
    XyDataSeries<double, double> data = new XyDataSeries<double, double>();

    if (selected != null)
        data.Append(x, y, selected);
        data.Append(x, y);

    ///데이터 적용
    scatter.DataSeries = data;
    return scatter;

private Dictionary<string, IRange> wgp(Point gwe, Point gwf, IEnumerable<IAxis> gwg)
    IEnumerator<IAxis> enumerator = gwg.GetEnumerator();
        while (enumerator.MoveNext() ? true : false)
            IAxis current = enumerator.Current;
            bool isXAxis = current.IsXAxis;
            IComparable comparable = current.GetDataValue((isXAxis ? true : false) ? gwe.X : gwe.Y);
            IComparable comparable2 = current.GetDataValue((isXAxis ? true : false) ? gwf.X : gwf.Y);
            if (comparable.CompareTo(comparable2) > 0)
                IComparable comparable3 = comparable;
                comparable = comparable2;
                comparable2 = comparable3;
            IRange value = RangeFactory.NewWithMinMax(current.VisibleRange, comparable, comparable2);
            srq.Add(current.Id, value);
        if (enumerator != null || 1 == 0)
    return srq;

Then, if you try to select the scatter part with the drag drop, a nullException error occurs. It says IAxis current =null.
Why does this error occur?

0 votes
0 answers

hi. I have some questions.

Let’s say I have multiple surfaces.
I want to hide all but one of them, and I want the remaining surface to grow larger.

This will temporarily stretch the numeric value texts on the y-axis of that remaining surface.
If we want the bottom surface with the x-axis date to be larger, the date text below it will be stretched.

Additionally, when I make certain surface x-axis visibility hidden and other surface x-axes visible, there is a temporary flicker. I would like to resolve this issue as well.

I look forward to your response, thank you.

  • cha cha asked 3 weeks ago
  • last active 2 weeks ago
0 votes

Is there a plan to add WinUI3 and/or Maui support? We’ve decided to move to WinUI3 and now seen to be stuck with a WebView and JS libraries for 3Dcharts

0 votes


I have implemented a scalable annotation which will pann and zoom with a heatmap,
see code below,

class ScalableAnnotation extends CustomAnnotation {
    constructor(...args) {
    update(xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans) {
        super.update(xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans);
        if (!this.initialDiff) {
            this.initialDiff = xCalc.visibleMax - xCalc.visibleMin;
            this.initialCircleRadius = Number.parseFloat('circle').attr('r'))
            this.initialCircleStrokeWidth = Number.parseFloat('circle').style('stroke-width'))
            this.initialLineStrokeWidth = Number.parseFloat('polygon').style('stroke-width'))
            this.initialWidth = Number.parseFloat(this.svg.getAttribute("width"));
            this.initialHeight = Number.parseFloat(this.svg.getAttribute("height"));
            this.zoomFactor = 1
        } else {
            this.diff = xCalc.visibleMax - xCalc.visibleMin;
            if (this.diff !== this.initialDiff) {
                this.zoomFactor = this.initialDiff / this.diff
                const width = this.initialWidth * this.zoomFactor;
                const height = this.initialHeight * this.zoomFactor;
      'circle').attr('r', (this.initialCircleRadius / this.zoomFactor) + 0.01)
      'circle').style('stroke-width', (this.initialCircleStrokeWidth / this.zoomFactor) + 0.003)
      'polygon').style('stroke-width', (this.initialLineStrokeWidth / this.zoomFactor) + 0.01)
                this.setSvgAttribute("width", width);
                this.setSvgAttribute("height", height);
                let borderX1 = this.getX1Coordinate(xCalc, yCalc) + this.xCoordShift;
                let borderY1 = this.getY1Coordinate(xCalc, yCalc) + this.yCoordShift;
                    borderX1 + width,
                    borderY1 + height

This works fantastic when zooming in and zooming out or panning see video below,

Bur when we resize the heatmap, the annotations do not scan with the heatmap. see video below,

Any suggestion on how to deal with this scenario?



0 votes

Hi thank you for resounding to other questions,

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

Please see the code below,

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

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

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

Any help is appreciated.


0 votes


In short, I am trying to do the same thing done here (, except the types I am using are different and I am having trouble making it work.

We are using MVVM, where our data series is an XyDataSeries<DateTime, double> and our view models are LineRenderableSeriesViewModels. I am trying to make a custom class that inherits from one of those types so I can override the draw function just like the question I linked to did, so I don’t have to change away from any of the types we are already using. The problem is I am not seeing any overridable internal draw type of function for either of those two types. Is there one that I’m missing or is there a different way to approach this?


0 votes

Sorry if this isn’t the best way to post this but I wasn’t sure what was a better approach. I made this post last week:
I have created a test project which reproduces the issue, it is attached

Edit: I’ve uploaded a second attempt at sharing the test project

0 votes

Hi there,

I have a license in the past that expired March 13, 2024 for SC-BUNDLE-SDK-ENTERPRISE product.

I want to use SciChart JavaScript now, but if I use a pre-expired version of the package, can I use it without purchasing a license again?

When I tested it by applying the 3.3.567 version(published on February 28, 2024) according to the guidlines, it seems that the watermark does not disappear.

Thank you.

  • nada nada asked 4 weeks ago
  • last active 3 weeks ago
0 votes

I am not able to find a chart modifier to allow panning in 3D charts. Can you please point me to the correct modifier?

Thank you,


0 votes


What is the best way to update the XyzDataSeries3D data?


does not seem to have way to update xValues, yValues and zValues? these seem to be classes but i could not find the class method.

Thank you,


0 votes


I am creating a very demanding application with several vertically stacked charts. I would like to use the best approach for using brushes / pens / sprites and textures.

  1. Can I leave the resources between render passes or do I have to always dispose it after a render pass?
  2. Which method is the most performant when drawing images? Should I use ISprite2d or ITexture2d. Is the DrawSprites the most performant?
0 votes


I am trying to get an event when a customAnnotation is selected and unselected. I can of course is click to coincide with selection, but how do I listen on the unselected event?



0 votes
0 answers

I’ve been working on getting stacked mountain plots going on multiple stacked y axes. It all works well until I try and put a series on one axes and then a series with a different count on another axes. At that point I get this error:

SciChartSurface didn’t render, because an exception was thrown:
Message: Index was outside the bounds of the array.

Stack Trace: at xpj.tkj(IEnumerable`1 cka) at
xpj.DrawStackedSeries(IRenderContext2D renderContext) at
renderContext, IRenderPassData renderPassData) at
xlh.jsy(RenderPassInfo hc, IRenderContext2D hd, Int32 he) at
xlh.jsx(ISciChartSurface gz, RenderPassInfo ha, IRenderContext2D hb)
at xlh.RenderLoop(IRenderContext2D renderContext) at

The 2 series have the same x range but different x values from each other. It doesn’t seem to happen for every set of values but I haven’t been able to work out what triggers it and have no access to the drawstackedseries code to see where the indexing is going off. This is happening on log axes but all y values are >0 and the ZeroLineY value is set to 0.1

0 votes
0 answers

Is it possible to do chart selection with shadowing other parts like this?
I tried using PaletteProvider, but you can’t make a gradient in it.

0 votes

ich would like to draw annotations for min/max-prices on a chart like the attached image. I got pretty close to the screen but I have two questions:
1. is there a way to automatically such min/-max-annoations (currently I determine min and max values manually and then draw the annotation at the respective x/y coordinates)
2. How can I make sure those annotations are visisble; currently I use growBy(0.1, 0.1) on each axis to have some room for the labels, but that seems pretty unreliable.


0 votes

I need to make Radar to visualize position of some point. It is the picture like this
enter image description here
The coordinates of red circle center always changing and need to repaint it in real time. Can I realize something like that via SciChart?

0 votes

I’ve been trying to get stacked y axes work when each is in log space but the data seems to ignore the positioning of the axes in this case. When stacking linear axes the data associated with each axes just plots in the space for each axis.

I’m using a grid panel for y axis layout

0 votes

I’m creating a web application in which I have a little bit over a million data points. When toggling annotations (about 4000) on one of my charts I noticed the memory usage of Chrome was doubled. I did some tinkering and found out this behaviour only occurred when I had “strokeDashArray” set in my VerticalLineAnnotations.

  for (let i = 0; i < 5000; i++) {
    const line = new VerticalLineAnnotation({
      x1: i,
      strokeDashArray: [5, 5] //If this is removed then the memory usage drops


Is there a known memory problem with dashed lines or anything I might do wrong?

0 votes

I am trying to add sci chart in nextjs app and its failing with a message “Aborted(both async and sync fetching of the wasm failed)”.
I have updated next config – webpack with :
const destWasmFolder = “static/chunks/pages”;
config.plugins.push(new CopyPlugin({
patterns: [
{ from: “node_modules/scichart/_wasm/scichart2d.wasm”, to: destWasmFolder },
And installed the package copy-files-from-to and created a file “copy-files-from-to.json in the root directory with content:
“copyFilesSettings”: {
“whenFileExists”: “overwrite”
“copyFiles”: [
“from”: “./node_modules/scichart/_wasm/”,
“to”: “./public/”

And updated package.json script with “”dev”: “cross-env NODE_OPTIONS=\”-r next-logger\” copy-files-from-to && next dev”

0 votes


I am trying to add multiple Y axis to this example:

What I want to achieve is to add an additional Y axis which would display the index of the loop. I have tried to make the first yAxis isVisible to false and add the additional one but it seems that it creates a blank chart (extra blue lines in the image attachment) with the index label + the number range. At the end vertically stacked axes are doubled instead of showing just the index.
I am attaching the images and the running example. Maybe there is an easier way to show the index of the loop of the particular graph while not displaying the number range?

Any help would be kindly appreciated.

  • Zino As asked 1 month ago
  • last active 1 month ago
0 votes

I am trying to add a custom modifier (derived from ChartModifierBase2D) to allow our users to navigate through datapoints using keyboard — left and right arrows.
But, the ZoomPanModifier prevents the keyboard events to reach this custom modifier.

Steps to reproduce the issue:
1. For example, use the following modifier that just listens to keyboard event and logs the event to console.
2. Add ZoomPanModifier along with the custom modifier.
3. Click on the chart to focus it and then press arrow keys. Nothing will be logged in the console.
4. Disable the ZoomPanModifier (either by setting its this.isEnabled = false or removing it entirely).
5. Click on the chart to focus it and then press arrow keys. You will see the keys logged in the console.

export class DataPointNavigatorModifier extends ChartModifierBase2D {
  public readonly type: string;

  constructor(options?: IChartModifierBaseOptions) {
    this.handleKeyDown = this.handleKeyDown.bind(this);
    this.type = 'DataPointNavigatorModifier';

  private handleKeyDown(ev: KeyboardEvent) {
    console.log('DataPointNavigatorModifier::handleKeyDown', ev);

  override onAttach() {
    this.parentSurface.domChartRoot.tabIndex = this.parentSurface.domChartRoot.tabIndex || 0;
    this.parentSurface.domChartRoot.addEventListener('keydown', this.handleKeyDown);

  override onDetach() {
    this.parentSurface.domChartRoot.removeEventListener('keydown', this.handleKeyDown);

I am open to other solutions that would allow users to navigate through datapoints using keyboard.

Best Regards,
Sachin Patel.

0 votes


I need to draw a lot of annotations. Those are pretty simple figures/icons. The gotchas:

  1. The axis (ticks/labels) should be inside of the chart area.
  2. The annotation should be drawn on the border of the axis/chart.

I started to use the immediate mode for this. Was pretty happy to see there are Layers in the render context and I thought I could schedule or manipulate the rendereings when it comes to what I want. Unfotunately it is immutable.

The first thing I could come over by manipulating the template at runtime although I do not want to re-template it in fear of bigger template changes than the change of Grid.Row at runtime.
The second part is more tricky now. I would like to have fine grained control over the ordering of what is drawn. At least above/below the RenderableSeries but best to select the layers as wanted.

One big deal I did overcome is some mouse hover action for the drawn annotations.

So my idea now would be to add custom rendering layers like the HighQualityRenderSurface but I have no Idea how this impacts the performance. I already have a target of ~30 charts. Fortunately visible ones would be only around 8 so I could manipualte the visibility on scroll to prevent render.

I attached an example of the idea.

What I tried before was interfering with The ISciChartRenderer to wrap a before and after render. The problem is the Services are registered and the value is asigned to a property so that my re-register (swap) has no effect. Finally I got it working using a IAnnotationsDrawingProvider wrapper.

You can find the related post on StackOverflow:

For the fine grained control over the rendering order I managed to use the Layers just need to do it before any counterpart manages to schedule an action (ISciChartRenderer worked just the base class private variable assignment is nasty).

0 votes

I have charts

    <s:SciChartSurface Grid.Row="0" Grid.Column="0" x:Name="SciChartSurface" Margin="3" Padding="3"
                       ChartTitle="{mainVM:Localization ChartMainSciChartSurface}" YAxes="{s:AxesBinding YAxes}" RenderableSeries="{s:SeriesBinding RenderableSeries}" Annotations="{s:AnnotationsBinding Annotations}">
            <s:NumericAxis AxisTitle="{mainVM:Localization ChartAxisXTitle}" VisibleRange="{Binding VisibleRangeXAxis, Mode=TwoWay}" />
                <s:SeriesValueModifier />
                <s:CursorModifier IsEnabled="{Binding IsShowValuesCursor}" />
                <s:LegendModifier x:Name="SciChartLegendModifier" GetLegendDataFor="AllSeries" ShowLegend="False"
                                  SeriesData="{Binding SeriesData, Mode=TwoWay}" />

As you see I have SeriesValueModifier tag but I cant see markers and values

enter image description here

I found rule “The SeriesValueModifier works on a single axis. You can change which axis by setting the SeriesValueModifier.YAxisId Property”. Is it mean what I can add markers only on one of Y axis?

0 votes

I have a license for 2D plots and now I am trying to evaluate the 3D plots. I used the most basic example provided to plot 3 axis.

import { useEffect, useRef } from "react";
import React from 'react'
import {
} from "scichart"

const createChart = async (divElementId) => {
    const { wasmContext, sciChart3DSurface } = await SciChart3DSurface.createSingle(divElementId, {
        //theme: new SciChartJsNavyTheme(),
        worldDimensions: new Vector3(300, 200, 300),
        cameraOptions: {
            position: new Vector3(300, 300, 300),
            target: new Vector3(0, 50, 0),
    sciChart3DSurface.xAxis = new NumericAxis3D(wasmContext, {
        drawMajorGridLines: true,
        drawMinorGridLines: true,
        drawLabels: true,
        axisTitle: "X Axis, 4-decimal places",
        visibleRange: new NumberRange(0, 1000),
        labelFormat: ENumericFormat.Scientific,
        cursorLabelFormat: ENumericFormat.Decimal,
        labelPrecision: 4,
        maxAutoTicks: 5,
        titleOffset: 50,
        tickLabelsOffset: 10,
    sciChart3DSurface.yAxis = new NumericAxis3D(wasmContext, {
        axisTitle: "Y Axis, 2 dp, prefix & postfix",
        labelPrecision: 2,
        labelPrefix: "$",
        labelPostfix: " USD",
        visibleRange: new NumberRange(10, 1000),
        maxAutoTicks: 5,
        titleOffset: 50,
        tickLabelsOffset: 10,
    sciChart3DSurface.zAxis = new NumericAxis3D(wasmContext, {
        axisTitle: "Z Axis, 0 dp",
        visibleRange: new NumberRange(0, 1000),
        labelPrecision: 0,
        labelPostfix: " kWh",
        maxAutoTicks: 5,
        titleOffset: 50,
        tickLabelsOffset: 10,
    //sciChart3DSurface.zAxis = new NumericAxis3D(wasmContext, { axisTitle: "Z Axis" });
        new MouseWheelZoomModifier3D(), // provides camera zoom on mouse wheel
        new OrbitModifier3D(), // provides 3d rotation on left mouse drag
        new ResetCamera3DModifier()); // resets camera position on double-click
    return sciChart3DSurface

const ThreeDPlotTemplate = (props) => {
    const sciChart3DSurfaceRef = useRef()
    useEffect(() => {
        sciChart3DSurfaceRef.current = createChart(`scichart-root-${}`); // Note, does not delete on unmount (todo later)
        console.log(sciChart3DSurfaceRef.current.then(value => console.log(value)))
    }, []);

    return (
                width: "100%",
                height: "100%",
                position: "relative",
                    width: "100%",
                    height: "100%",
                    position: "relative",
                    position: "absolute",
                    width: "100%",
                    top: "35%",
                    textAlign: "center",
                    pointerEvents: "none",
                    color: "#ffffff77"
                <p className="title">SciChart.js 3D Chart Example</p>
                <p className="subTitle">Drag the mouse to rotate, use MouseWheel to zoom</p>
                <p className="subTitle">Double-click to reset zoom</p>
        </div >

export default ThreeDPlotTemplate

But i am getting just a blank screen Please see attached image. Is this an issue we licensing? or am i missing something?



0 votes
0 answers

Hi everyone,
Wanted to check if there is an existing implementation of NonUniformGridDataSeries3D in js. Had a use case that requires plotting of a 3d mesh with non-uniform grid. I could only find UniformGridDataSeries3D. Can someone please help?

0 votes

Hi team,
I have upgraded dll as mentioned above. While exporting the image both x and y axes are deviating from it’s position. I have attached export1.png image for your reference .
The deviation is happening only when we use Window.Show().

We are using this to generate the report. so we are using exporting the image we are closing the window using Window.close()

If we use Window.ShowDialog() exporting as png is working fine. But in our use case we cant use showDialogue, coz here user need to close the window while generating the report.

Before upgrading the Dll, it’s working fine.

I have attached sample code for your reference(SampleCode.txt).
Under Mainwindow.xaml consists two button’s
One button to export png using show window – Here x axes values are deviating as shown in the export1.png
another button to export png as Show Dialogue window. – Here X axes value are plotting correctly

Chart.xaml will use to draw the chart.

Thanks and Regards
Hemanth Patel BS

0 votes


I have problem with Major and MinorTickLinesStyle on axis. The same code produces different results in version 7.x and 8.x. Can you please take a look and let me know what was changed between versions.

Thanks in advance.

Kind regards,

0 votes
0 answers

Hello, we have been working on our charts for more than a year now. The performance is really bad recently, it uses 100% of CPU when hovering on the chart, it seems to be an issue with the RolloverModifier, if we remove it; everything feels smother and the CPU usage is on normal levels. We tried rolling back to an old version of SciChart, but the problem persist. Any idea of what can be the issue?

0 votes

I have real-time chart with sorted X axis. It is OK for me because data which displayed on chart comes from industrial equipment with “always incremented” X value. But sometimes process stop. In this case industrial equipment received values near last before stop (differed by 5th or 6th decimal sing). And in this case I don’t need to build chart. I will want check new X values for they next value must be more than previous, because now I have error “Data has been Appended to a DataSeries which is unsorted in the X-Direction. Unsorted data can have severe performance implications in SciChart”.
For Y values DataSeries has DataSeries.LatestYValue and I can compare it to new value. What the best way to avoid adding ‘less than last’ value for X axis.

0 votes

In a scenario where two numeric axis (X, Y) both have IsCenterAxis set to true, is it then possible to force MouseWheelZoomModifier to use center point of current view when zooming, rather than using mouse point as center point when zooming ?

0 votes

Is it possible to add an opaque wider line to the selected series line?

I’ve looked at setting the SelectedSeriesStyle and modifying the StrokeThickness and the Opacity.

If I set a larger StrokeThickness, then a wide line is shown.
If I set a small Opacity the line is opaque – but, as expected, the original line is gone (well it is now wide and opaque).

We would like the original style of the series to be unchanged but a wider, opaque line to be drawn in the same place.

Is the only way to add a new series with a wide, opaque line but the same values (and then somehow hide this series from the legend and the CursorModifier tooltip)?


0 votes

When displaying a value in a stacked column chart, if the value is negative, the negative value should be drawn from the 0 position of the y-axis or from below the other negative value if it exists. Similarly, the positive value after the negative should be drawn from the 0 position of the y-axis or from above the other positive value if it exists. But instead, in both cases, they are being drawn from the end of the previous value, resulting in overlapping.

1 vote

Is there a way to get discreet colormap for the heatmap? currently no matter how many or how few colors are defined in the colormap table it always adds a gradient. how can we get a discreet ranges for colormap?


0 votes

We have a scalablecustomannotation and i have embedded a png in side the snnotation svg. currently when I zoom in on the svg it does interpolation/smoothening of the pixels by default. what would like to set is pixellated mode where there is no automatic smoothening.

Any ideas how to achieve that?

E.g. please see the video below, what you see on the right in the video is what I get from scichart. what I am trying to achieve is the effect in the left window


0 votes
0 answers


I have a problem reading the position of the vertical line annotations. The function “getX1” returns type double (0 – 1) or date depending on whether the annotation has not changed its position. I found out from the documentation that the type returned depends on the coordinateMode. I set it to absolute. This change had no effect, unlike in library written in Java. Is it possible to set the default type? Can I ask for any guidance needed to solve the problem? The version of the library I am using is

Thanks in advance!

0 votes
0 answers

My purpose is SCIAxisLabelAnnotation draw above on border line.
like this <– this is just design guide. not a app screenshot.

But SCIAxisLabelAnnotation is can’t overlap renderable series area. So It can’t overlap renderable series area border line.

So I have to customize.
I think that If I add view into render surface, and it’s order make to zero, I can get TOBE result.

My code is below.

But SeparatorView is always on view’s top. So I’m struggling.
You can See result.
It’s covered all surface.

How can I insert some view below Y Axis or SCIAxisLabelAnnotation?

tl;dr I want customize annotation shape and it draw above on 1st top layer.

  • jay han asked 2 months ago
  • last active 2 months ago
0 votes


I am having a problem where I want to display the Rollover Modifier only when I click on the selected graph.
For example:
If I select the Second Lines Series, I want to see the rollover only for that particular graph and not the first one and the third one.

I have tried using charts id’s as a reference to show only one tooltip but it just enables it for all the graphs.

Any help would be kindly appreciated.

  • Zino As asked 2 months ago
  • last active 2 months ago
0 votes
0 answers

It did not happened all the time. I guess that some GC strategy could cause the error! When an interrupt occurs, it will jump to List.cs. I have checked the code of application and found nothing wrong with it.

Exception Information:
(1)The crash information when Debuging
“System.ArgumentOutOfRangeException” Unhandled exceptions of type System.Private.CoreLib.dll. Happen in “Index was out of range. Must be non-negative and less than the size of the collection.”

(2)the log catched in the running status Before crash
Exception Message: Native collection has been destructed!
Exception Source: SciChart.Charting3D
Exception Line: Client.App.Main()

Showing 1 - 50 of 4k results