SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components

0 votes

Scenario: user selects an area of a heatmap chart using a box annotation via a mouse drag.

I have created a custom modifier to draw the box annotation. I’ve used this as the basis: SimpleDataPointSelectionModifier.ts

My question is: how to I get the X axis start + end values and the Y axis start + end values based on the area of the annotation/mouse coordinates.


0 votes

We want to create loop graph in android wrap data

0 votes

Just trying to run the demo using these instructions:

It doesn’t work I’m getting “Failed to emit precompiled header” and “SciChart/SciChart.h file not found”

0 votes

I added the data to each BoxPlotDataSeriesas shown in the code below.
Boxplot widths are not the same as the image below.
Please let me know can we change the size of the box plot chart.

IEnumerable<BoxPoint> boxData = GetBoxPlotData().ToArray();

RenderableSeriesViewModels = new ObservableCollection<IRenderableSeriesViewModel>();
foreach (var data in boxData)
    var boxDataSeries = new BoxPlotDataSeries<double, double>();
    boxDataSeries.Append(data.XValue, data.Median, data.Minimum, data.LowerQuartile, data.UpperQuartile, data.Maximum);

    var boxplotViewModel = new BoxPlotRenderableSeriesViewModel { DataSeries = boxDataSeries };

Same issue :

  • Isol Gwon asked 2 months ago
  • last active 1 month ago
0 votes

Hello there. At the beginning of the program, I define the workspace as w=10 and h=10 units. I set the new workspace to 5×5 in a button event. The new workspace is created but the old 10×10 volume remains on the screen. When I create the new workspace I want the old one to disappear. Thank you in advance for your help. Good work.

My button event.

btnSetNewWH.setOnClickListener(new View.OnClickListener() {
    public void onClick(View view) {
w = 5;
h = 5;
ds3d = new UniformGridDataSeries3D<>(Double.class, Double.class, Double.class, w, h);      

rs1 = sciChart3DBuilder.newSurfaceMeshSeries3D()
        .withMeshColorPalette(new GradientColorPalette(colors, stops))

0 votes

Good afternoon,

I wanted to synchronize the mouse events between graphs, but based on the value of the X axis, not on the position within the graph. In the photo attached below, it is seen that the mouse events are synchronized, and the rollover appears in both graphs. However, what I want is that if, for example, in the graph on the left, the mouse is at time 00: 15: 00.000, in the graph on the right, the rollover also appears at position X 00: 15: 00.000, regardless the width of each graph. Until now I have not been able to get it, as seen when on the left it is at the time 00: 22: 37.00 on the right it appears at the point 00: 10: 23.750.

I would need a way to achieve this with code behind, since I create the graphics programmatically and without MVVM.

As extra information, all charts have the same range of X axis values (they all go from the same start time to the same end time)

Thanks a lot!

0 votes

I’m trying to use AvaloniaUI with .NET Core 3.1 to create an application using SciChart, but I get XAMLIL error when trying to add a SciChartSurface following the code from the tutorial. I used a standard Avalonia MVVM Application template when creating the project.

This is the code:

<UserControl xmlns=""
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"

        <!-- Bind to ChartViewModel.ChartTitle etc -->
        <s:SciChartSurface ChartTitle="{Binding ChartTitle}">
                <s:NumericAxis AxisTitle="{Binding XAxisTitle}"/>
                <s:NumericAxis AxisTitle="{Binding YAxisTitle}"/>

And the error I get is:
“XAMLIL: Unable to resolve type SciChartSurface from namespace Line 27, position 4″
which is the first s:SciChartSurface entry.

Any ideas what might be wrong? Does SciChart not work with any framework regardless of using .NET Core 3.0?
I have tried changing between Core 3.0 and 3.1, which does nothing.

0 votes
0 answers

I’m using a candlestick series in a slightly unconventional use case, essentially to show a range at a given data point, screenshot below.
enter image description here

This works fine if the number of the data points and window size stays the same, but if I resize the window, the bars shrink accordingly, which I want to avoid.
enter image description here

So basically what I need is some kind of rendering mode that takes in a pixel width for the bars.
I’ve attempted to update the DataPointWidth on the series using a combination of the screen width and the number of points, but it’s extremely messy since the change needed isn’t linear.
enter image description here

1 vote

How do I insert gaps in a heatmap series? At the moment null values seem to show as either the max value colour or the min value colour.

0 votes

i have been working on line charts and i need to show date as well as time on the axis( 21 june 08 05:30:PM like this).I’ve tried with date axis and numeric axis ,but it doesn’t helps.Do we have any suggestions or samples which could help me

0 votes


I have several vertical line annotations placed on my chart.

(1.) id=9136 at location 1229.8065
(2.) id=8572 at location 1230.0483
(3.) id=8570 at location 1230.1089

At a certain level, the annotations are at the good locations. Before 1230 for (1.) and after, for both next (see image GoodLocation.png).
If I zoom out, (1.)(2.)(3.) labels are shifted to the right (see WrongLocation.png) and the tooltip on (1.) correspond at tooltip (2.)

Can you help me?
In advance thank you for your support

0 votes


Is it possible to display distinct labels for Y, and Y1 on BandRenderableSeriesViewModel using RollerOverModifier?

I have tried using following code snippet for RolloverModifier.TooltipTemplate, additionally tried using TooltipContainerStyle with a custom template. With these, same tooltip appears on both the lines. Is it possible to
1- Either display tooltip on only one line (e.g. on the red line), and point markers on both lines.
2- Or display a single label with current point markers’s value on each line i.e. Y on Red, and Y1 on green?
3- Set point marker colors to same as line’s as circled on the screenshot?

<DataTemplate x:Key="BandTooltipTemplate" DataType="s:XyySeriesInfo">
    <StackPanel Orientation="Vertical">
        <TextBlock Foreground="White">
            <Run Text="Series: "/>
            <Run Text="{Binding SeriesName, StringFormat='{}{0}:', Mode=OneWay}"/>
        <TextBlock Foreground="White">
            <Run Text="Top: "/>
            <Run Text="{Binding FormattedYValue, Mode=OneWay}"/>
        <TextBlock Foreground="White">
            <Run Text="Bottom: "/>
            <Run Text="{Binding FormattedY1Value, Mode=OneWay}"/>

Existing result screenshot attached.

Thanks, Roger.

0 votes

Is it possible to vary the zsize and xsize of a WaterfallDataSeries3D series at runtime?

1 vote

Hi Scichart Team,
RenderableSeries Hit-Test still having some issues. I saw that the bug on your board is already closed state and my last comments are missed on the bug. So i am adding the same here.

Can you please check the video and the code. Only change i have done on the Example is the data values are updated. On the video you can saw the clicking outside for some area Hit is showing, some area miss is showing, and clicking on the lines or point also showing the same. Let me know you need any more inputs from my side.

0 votes

Hi there,

I need to display a horizontal column chart so I followed the example for rotating charts:

<s:NumericAxis BorderBrush="Black" BorderThickness="1,0,0,0" x:Name="xAxis" AxisAlignment="Left" Margin="0,20"/>
<s:NumericAxis BorderBrush="Black" BorderThickness="0,0,0,1" AxisAlignment="Top"  FlipCoordinates="True" x:Name="yAxis"  />

And it works as expected.
Now the Problem: I want to be able to move my x-Axis to any given value. For “normal”(y-axis vertical and x-axis horizontal) I use the shifted axis example, but for that to work the axis need to be center axis (or am I missing something?) and with center axis set to true the entire thing looks like in the picture I attached.

Any help would be appreciated.
Thanks in advance.

0 votes
0 answers

I want show min and max only. for y axis.
how to succeed this problem.
Please support my problem. thank you. sorry my english.

0 votes

Would there be a straight-forward way to put the SciChart Legend from a LegendModifier inside a WPF Expander control, to show or hide the legend?

Would ScichartSurface need to be subclassed in order to accomplish this visual?

<s:LegendModifier ShowLegend="{Binding ShowLegend}" 
    LegendPlacement ="Right"/>
0 votes


I have a valid license key for development. But occasionally the charts show the message below and I have to restart the app to avoid that. May I ask is there a reason for that and how to fix it?

"Sorry! You have not set a License Key. You can request a free trial key from or purchase at"


  • Gang Xu asked 2 months ago
  • last active 2 months ago
0 votes

Unsorted xValues is possible on SCI Chart? I tried with dataIsSortedInX: false and isSorted: false on dataSeries, But its not showing the correct range.


 new XyDataSeries(wasmContext, {
        dataSeriesName: "Line Series",
        xValues: [0,10,20,13,54,15,26,17,18,19],
        yValues: [0,1,5,1,20,5,1,8,9,3],
    dataIsSortedInX: false
0 votes

Hey Guys,

On a SciChart surface (CandleStickChart), how could I add LineAnnotation, BoxAnnotation, and TextBox annotation using TradingAnnotationCreationModifierMvvm (available under
ChartAnnotations/Trade Annotations sample). I have recreated a sample, based on the example.

Following is my XAML code,

Chart Surface: Modifiers.

<s:TradingAnnotationCreationModifierMvvm AnnotationViewModelType="{Binding DataContext.AnnotationCreationVM.AnnotationType, Source={StaticResource ROOT_OHLC_CHART_SPY}}"
                                                         AnnotationViewModelsCollection="{Binding LAnnotations}"
                                                         IsEnabled="{Binding DataContext.AnnotationCreationVM.IsAnnotationCreationEnable, Source={StaticResource ROOT_OHLC_CHART_SPY}, Mode=TwoWay}"
                                <ext:EventToCommandBehavior Command="{Binding DataContext.AnnotationCreationVM.AnnotationCreatedCommand, Source={StaticResource ROOT_OHLC_CHART_SPY}}"
                                                    PassArguments="True" />

ParentView Buttons,

<ToggleButton Width="Auto" HorizontalAlignment="Stretch" Content="Line" 
                                  Style="{StaticResource ChartToggleButton}" 
                                  IsChecked="{Binding AnnotationCreationVM.Line}" 
                                  CommandParameter="{x:Type s:LineAnnotationViewModel}"/>
                    <ToggleButton Width="Auto" HorizontalAlignment="Stretch" Content="Elliot Wave"  Grid.Row="1"
                                  Style="{StaticResource ChartToggleButton}" 
                                  IsChecked="{Binding AnnotationCreationVM.EllioteWave}" 
                                  CommandParameter="{x:Type dt:ElliotWaveAnnotationViewModel}"/>
                    <ToggleButton Width="Auto" HorizontalAlignment="Stretch" Content="Pitch Fork" Grid.Row="2" 
                                  Style="{StaticResource ChartToggleButton}" 
                                  IsChecked="{Binding AnnotationCreationVM.PitchFork}" 
                                  CommandParameter="{x:Type dt:PitchforkAnnotationViewModel}"/>
                    <ToggleButton Width="Auto" HorizontalAlignment="Stretch" Content="Xabcd" Grid.Row="3" 
                                  Style="{StaticResource ChartToggleButton}" 
                                  IsChecked="{Binding AnnotationCreationVM.Xabcd}" 
                                  CommandParameter="{x:Type dt:XabcdAnnotationViewModel}"/>
                    <ToggleButton Width="Auto" HorizontalAlignment="Stretch" Content="Head N Shoulders" Grid.Row="4" 
                                  Style="{StaticResource ChartToggleButton}" 
                                  IsChecked="{Binding AnnotationCreationVM.Hns}" 
                                  CommandParameter="{x:Type dt:HeadAndShouldersAnnotationViewModel}"/>
                    <ToggleButton Width="Auto" HorizontalAlignment="Stretch" Content="Fibonacci Extension" Grid.Row="5" 
                                  Style="{StaticResource ChartToggleButton}" 
                                  IsChecked="{Binding AnnotationCreationVM.FibExt}" 
                                  CommandParameter="{x:Type dt:FibonacciExtensionAnnotationViewModel}"/>
                    <ToggleButton Width="Auto" HorizontalAlignment="Stretch" Content="Fibonacci Retracement" Grid.Row="6"
                                  Style="{StaticResource ChartToggleButton}" 
                                  IsChecked="{Binding AnnotationCreationVM.FibRetr}" 
                                  CommandParameter="{x:Type dt:FibonacciRetracementAnnotationViewModel}"/>

ParentView view model,

public ICommand AnnotationCreatedCommand => new ActionCommand<AnnotationCreationMVVMArgs>(e =>
            var annotation = e.NewAnnotationViewModel;
            if (annotation != null)
                if (annotation is ITradingAnnotationViewModel tradingAnnotation)
                    ((AnnotationBase)tradingAnnotation.Annotation).Selected += OnAnnotationSelectionChanged;
                    ((AnnotationBase)tradingAnnotation.Annotation).Unselected += OnAnnotationSelectionChanged;
                annotation.IsEditable = true;
                annotation.CanEditText = true;
                annotation.IsSelected = true;

                FibRetr = false;
                FibExt = false;
                Hns = false;
                Xabcd = false;
                PitchFork = false;
                EllioteWave = false;
                Line = false;

            IsAnnotationCreationEnable = false;
            IsAnnotationDrawn = false;

        catch { }

    private void OnAnnotationSelectionChanged(object sender, EventArgs eventArgs)
            var parent = ((System.Windows.FrameworkElement)((System.Windows.FrameworkElement)sender).Parent).TemplatedParent;
            if(parent is SciChartSurface)
                var surface = parent as SciChartSurface;
                if(null != surface)
                    OHLCVChart chart = surface.DataContext as OHLCVChart;
                    Annotations = chart.LAnnotations;
                    SelectedAnnotation = Annotations.FirstOrDefault(x => x.IsSelected);
        catch { }        

If there is any other way to club all Trading related annotations + TextBox, Line, TrendLine Annotations creation dynamically using any other modiefier, that will do. We are tying to build Trading charts: with Ability to add annotations.


0 votes
0 answers

I opened a page in my app, this page just have a chart control and displaying data. it throw exception: “VXccelEngine2D.dll is either not run on Windows or it contains an error, try installing again.”

did someone encounter this issue? who can help me out? thanks much.

                Grid.Column="1" x:Name="DCVChart" sc:ThemeManager.Theme="BrightSpark" RenderPriority="Low" 
                RenderableSeries="{Binding DataSeries}" Annotations="{sc:AnnotationsBinding AnnotationViewModels}">
                    <sc:TimeSpanAxis VisibleRange="{Binding XAxisRange, Mode=TwoWay}" AxisTitle="Time(s)"/>
                    <sc:NumericAxis AxisAlignment="Left" VisibleRange="{Binding YAxisRange, Mode=TwoWay}" AxisTitle="Data" DrawMajorBands="True" GrowBy="0.1, 0.1"/>
                        <cm:SimpleXyZoomModifier Source="DCV"  IsEnabled="True" IsXAxisOnly="False"/>
                        <cm:SimpleZoomExtentsModifier Source="DCV" ReceiveHandledEvents="True"/>
                        <cm:ZoomPanModifierEx ExecuteOn="MouseRightButton" ClipModeX="None" ReceiveHandledEvents="True"/>
                        <sc:MouseWheelZoomModifier ReceiveHandledEvents="True"/>
                        <sc:RolloverModifier x:Name="rolloverModifier" ReceiveHandledEvents="True" ShowAxisLabels="True" ShowTooltipOn="Always" TooltipUsageMode="Popup"/>
  • Xiaowei asked 2 months ago
  • last active 2 months ago
0 votes


How can I add a geometry to a 3D chart in MVVM?

Best regards

0 votes

Hi there,

I would like to use a column chart with labels. Our client tends to use really long names for these labels, so I was wondering if it is possible that these labels wrap. I could find no property in the docs or source that achieves this. The attached screenshot shows the current (and undesired) rendering.

The current behavior seems to be that labels in between are hidden when longer labels overlap them. Is this a configurable property? In our case, the labels may never be hidden.

Kind regards,
Tim Havinga

0 votes

I’m trying to implement sciChart to flutter app (Android). It gets pretty confusing when trying to make it work. Anyone have examples how to make SciChart to work on Flutter? Adding the license works just fine. Only need for ECG chart for now. Thanks.

0 votes

I’ve been trying to implement the scichart js blazor wrapper in a serverside application. The chart starts to load, but gives the following error:
Failed to load resource: the server responded with a status of 404 () :5001/

it looks like is in the wrong place, but as far as I can tell it’s where it should be (in wwwroot).

is there something special I need to do in sever side? I can get it working fine in webAssembly Blazor

0 votes

Hi all,

I am trying to create a vertex selection modifier for a 3D chart that would allow me to select everything within two points on an axis. I have inherited from ChartModifierBase and created overrides for the OnModifierMouse events but I need a way to calculate the world or data coordinate of my axis. I know that CameraController has a ScreenToWorldSpace method but this is not exposed on the Camera3D class. Currently I have resorted to calling the TSRCamera’s TransformIntoWorldCoordinates method but would prefer a less roundabout solution. Is there an easier way to calculate screen to world/data coordinates or a way to get the position on my axis from screen coordniates?


0 votes
0 answers

On RubberBandXyZoomModifier i am using the YDirection zoom. When i click and drag out side the area of sci chart and leave the mouse click. Then again click inside the scichart, it showing the selection area and not disappear after new selection of zoom or pan the chart. the selected area is still showing as selected.

0 votes

I was just going through the tutorial and had my project initializing the graph and drawing a few datapoints. Out of the blue after recently building with no new changes, I’ve been getting hit with the attached message. I’ve even tried deleting the scichart sub-folder within node_modules and reinstalling scichart via npm to no avail.

0 votes


How can we turn the light off and on in 3D drawings in Android studio?

Best regards…

0 votes

I was used fifo(scrolling) chart in wpf scichart.


I could not found fifo option in js scichart.

Maybe because there is no fifo option, if there is a lot of data accumulated, the chart is slow and cannot be used.

Can I use fifo(scrolling) chart in js scichart?

  • 동윤 이 asked 3 months ago
  • last active 3 months ago
0 votes


I am getting console error and page is crashing and reloading the page.

0 votes

With fifocapacity(XyDataSeries), memory behaves like an image. (Repeat ups and downs)
Is this due to fifocapacity(XyDataSeries)?

Capture : x = minutes , y = MB

0 votes

Is there a way to show the axes as a line while not drawing the grid? (right now I have a white surface and white gridlines in the custom theme, but with that the axes are now just the ticks)
To clarify the Y-Axis is a middle axis so a border would not work.

0 votes

I need to set the style of the ellipse on my VerticalSliceModifier (and make it a custom color etc)

                <s:VerticalSliceModifier ShowTooltipOn="Never" Foreground="White" Name="sliceModifier">
                        <s:VerticalLineAnnotation X1="{Binding Number}" Style="{StaticResource sliceStyle}" />

However my series is created in code as a MountainRenderableSeriesViewModel and bound to the chart via SeriesBinding

        RenderableSeries="{s:SeriesBinding Series}"
        Annotations="{s:AnnotationsBinding Annotations}">

All the examples I’ve seen use the RolloverMarkerTemplate and define it under as a child node under BaseRenderableSeries or FastLineRenderableSeries, but I cannot find how to assign this to a series when it is defined in a ViewModel and assigned as above.

I’m new to SciChart and any help on this would be great.

0 votes


I want to make an dot horizontal line in the chart surface.
How can I make this with HorizontalLineAnnotation?

Please help me

  • Bruce Juli asked 3 months ago
  • last active 3 months ago
0 votes


Currently when we scroll the mouse pointer the zoom level is increasing/decreasing and when we click and drag the pan the chart. I want is when we scroll the chart should change the visible range (Pan chart), and clicking and selecting the area need to zoom like RubberBandXyZoomModifier. But I need to zoom only the X axis. Y axis should be the same as before zoom. Is this possible with SCI chart??

0 votes

Good evening!
I wrote a test program with your library, the following situation arose:
On Windows 10 everything works fine, and on Windows 7 the following error (for 3D Charts)

XamlParseException: The invocation of the constructor on type 'SciChart.Charting3D.SciChart3DSurface' that matches the specified binding constraints threw an exception.

Stack Trace:
   at System.Windows.Markup.WpfXamlLoader.Load (XamlReader xamlReader, IXamlObjectWriterFactory writerFactory, Boolean skipJournaledProperties, Object rootObject, XamlObjectWriterSettings settings, Uri baseUri)
   at System.Windows.Markup.WpfXamlLoader.LoadBaml (XamlReader xamlReader, Boolean skipJournaledProperties, Object rootObject, XamlAccessLevel accessLevel, Uri baseUri)
   at System.Windows.Markup.XamlReader.LoadBaml (Stream stream, ParserContext parserContext, Object parent, Boolean closeStream)
   at System.Windows.Application.LoadBamlStreamWithSyncInfo (Stream stream, ParserContext pc)
   at MS.Internal.AppModel.AppModelKnownContentFactory.BamlConverter (Stream stream, Uri baseUri, Boolean canUseTopLevelBrowser, Boolean sandboxExternalContent, Boolean allowAsync, Boolean isJournalNavigation, XamlReader & asynterObjectConver)
   at MS.Internal.AppModel.MimeObjectFactory.GetObjectAndCloseStream (Stream s, ContentType contentType, Uri baseUri, Boolean canUseTopLevelBrowser, Boolean sandboxExternalContent, Boolean allowAsync, Boolean isJournalNavigation & asamlOjectConstruction)
   at System.Windows.Navigation.NavigationService.GetObjectFromResponse (WebRequest request, WebResponse response, Uri destinationUri, Object navState)
   at System.Windows.Navigation.NavigationService.DoNavigate (Uri source, NavigationMode f, Object navState)
   at System.Windows.Navigation.NavigateQueueItem.Dispatch (Object obj)
   at System.Windows.Threading.ExceptionWrapper.InternalRealCall (Delegate callback, Object args, Int32 numArgs)
   at MS.Internal.Threading.ExceptionFilterHelper.TryCatchWhen (Object source, Delegate method, Object args, Int32 numArgs, Delegate catchHandler)

AccessViolationException: Attempted to read or write protected memory. This is often an indication that other memory is corrupt.

Stack Trace:
   at A.QBB.DJ (UInt32 D, Boolean I, Boolean J)
   at SciChart.Charting3D.Interop.SCRTWPFInterop.TwisterInitEngine (UInt32 multiSampleAntiAliasing, Boolean _bUseDirectX9, Boolean _bD3D11UseLowerFeaturesLevel)
   at SciChart.Charting3D.Viewport3D.QB (Boolean D)
   at SciChart.Charting3D.SciChart3DSurface.KYB ()
   at A.VDB.BB (Action D, String I)
   at SciChart.Charting3D.SciChart3DSurface..ctor ()

I ran the SciChart WPF Examples Suite program and saw the same message.

Please tell me what to do (preferably without a new version, I read that only SciCharts 5 work stably for Windows 8 and below)

System Information:
Windows 7 64-bit, 8GB RAM, 1TB SSD, .NET Framework 4.5.2
SciCharts: Version

in version the situation is similar

0 votes

Hi everyone!

I have a candlestick chart that uses SCIZoomPanModifier() so i can zoom and pan in the chart. I added a SCITooltipModifier() so i can inspect the individual data points. I noticed that by adding the toolTipModifier, that my pan and zoom stops working. I can’t figure out why. Would really appreciate if someone could tell me why or if i am missing some variable i need to set

1 vote

I’m looking for some direction on how to implement a modifier that reacts to interaction (mouse up/down etc) with a charts axis

  • User clicks on axis
  • Provide callback for side effect when clicked


0 votes

Hi, I’m looking for some pointers on how to implement the following:

  • User draws a selection on the chart (similar to rubber band modifier)
  • Annotation is drawn on the chart conforming to the users selection
  • Annotation is fixed relative to the data point (e.g. will scroll is the chart is panned etc)

Many thanks

0 votes

We are using NumericAxis for the y-axis and x-axis of a bar chart. The x-axis uses a LabelProvider (to convert integers to strings) and a TickLabelStyle (to rotate the label by 270 degrees so it is vertical going from the bottom to the top). We find that sometimes the y-axis is not drawn (however, it will be drawn if the chart is resized or re-painted).

The work-around to the problem is adding spaces to the front of the shorter labels so all of the labels are all the same length. However, this work-around does not work for every case.

Have you seen this issue before and is there a better solution? Thanks!

0 votes

I want to draw a spectrogram in WPF application and after searching I found your control. I downloaded your demo (trial version) and I would want to check if it completely meets my requirements. As starting I try to make zoom-in in your demo and I didn’t succeed.
Maybe you can tell me if it’s supported?
Thank you very much!

  • B H asked 3 months ago
  • last active 3 months ago
0 votes
0 answers

I have custom annotations built on the BoxAnnotation base class. The annotations have a rotation feature so that their content can be rotated.
RenderTransform is applied down to BoxAnnotation itself, so that it’s contents are rotated all along with the handlers. But resize grips are staying the same. Is it possible to pass the existing transform (the one applied to the content) also to the grips?

0 votes

We use WPF’s lineChart component to load a huge file. This file may contain a lot of curves, each curve contains 32M points. The point is of type float.
We found that the loading curve of the line chart is relatively slow. Through performance analysis, I think it is caused by XYDataSeries.Append(IEnumber x,IEnumber y).
Excuse me, how can I optimize. It would be better if there is a code example.
Looking forward to your reply.

  • wang peng asked 3 months ago
  • last active 3 months ago
1 vote

Working on an application that requires toggling between Linear and Logarithmic scales. I am using the JavaScript version of the library, and I see that there is a LogarithmicNumericAxis available in the WPF version but there is not one currently supported in the JS version.

Curious if there were any recommendations on how to go about hand rolling this type of functionality?

The application is doing realtime streaming of data points so need to be able to update existing values as well as handle incoming values.

0 votes

Hi guys,

I just started using SCICHART. I am working my way through the provided tutorials and i noticed that when i add a SCITooltipModifier to the chart, all my other modifiers (zoom and pan and pinchzoom) stopped working. Is this normal? Because i want my chart to have zoom functions and show what datapoints are touched by a user.

Thanks in advance!

0 votes

I have a line chart and need to implement textAlign: left property for tickLabel on yAxis. I have found some way to do it on the forum, but it does not work in my case:
xAxis.setAxisTickLabelStyle(new AxisTickLabelStyle(Gravity.CENTER, Layout.Alignment.ALIGN_CENTER, 5, 0, 5, 0));
I get the error:
Alignment cannot be converted to int
But according documentation AxisTickLabelStyle class get 5 int arguments. Can you help me please how to solve it!

0 votes
0 answers


Today, I tried repository to my project. ColumnRenderableSeries3D is missing, so I was added by manually. But now I stuck.

I can’t change column width and color.

I know, Xamarin forms actually in plan, but somehow someone can help me, if I share my whole code?

I Attached my image.

0 votes

I see in the documentation that I need to set the boolean to true/false. But my question is how do I do this after the series has been rendered? I am using a custom legend and need to be able to toggle visibility.

  export default function Chart() {
  const [sciChartSurface, setSciChartSurface] = React.useState<SciChartSurface>();
  const [wasmContext, setWasmContext] = React.useState<TSciChart>();

  const dataSeriesMapRef = React.useRef<Map<keyof typeof chartData, XyDataSeries>>();

  React.useEffect(() => {
    (async () => {
      const { sciChartSurface, wasmContext } = await drawChart(theme, chartType);

    dataSeriesMapRef.current = new Map<keyof typeof chartData, XyDataSeries>();

    return () => sciChartSurface?.delete();
  }, [chartType]); // make sure the chart is initialized only once

  React.useEffect(() => {
    if (dataSeriesMapRef.current && sciChartSurface && wasmContext && !isLoading) {
      // const currentSeries = sciChartSurface.renderableSeries.asArray();
      // if (currentSeries) sciChartSurface.renderableSeries.clear();
      updateChartWithData(dataSeriesMapRef.current, theme, wasmContext, sciChartSurface, chartData, chartType);
  }, [theme, chartData, wasmContext, sciChartSurface, isLoading]);

  return (
    <div id="chart-container">
        dataSeriesMap={dataSeriesMapRef.current as Map<keyof typeof chartData, XyDataSeries>}
        sciChartSurface={sciChartSurface as SciChartSurface}
        wasmContext={wasmContext as TSciChart}
      <div id={DIVID} style={{ width: windowWidth, height: windowHeight }} />
      <ControlsBottom />


    export default async (theme: ExtendedTheme, chartType: string) => {
  const { sciChartSurface, wasmContext } = await SciChartSurface.create(DIVID);
  const isLightTheme = theme.palette.type === 'light';

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

  xAxis.labelProvider.formatLabel = (unixTimestamp: number) => {
    return new Date(unixTimestamp * 1000).toLocaleDateString('en-us', {
      month: 'short',
      year: 'numeric',
      day: 'numeric',

  yAxis.labelProvider = new CustomLabelProvider();


  if (chartType !== 'stack') sciChartSurface.chartModifiers.add(new RolloverModifier({ showRolloverLine: false }));
  sciChartSurface.chartModifiers.add(new ZoomPanModifier());
  sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
  sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
  sciChartSurface.chartModifiers.add(new PinchZoomModifier());

  const rubberBandXyZoomModifier = new RubberBandXyZoomModifier({
    isAnimated: true,
    animationDuration: 400,
    easingFunction: easing.outExpo,
    fill: '#FFFFFF33',
    stroke: '#FFFFFF77',
    strokeThickness: 1,


  if (isLightTheme) sciChartSurface.applyTheme(new SciChartJSLightTheme());
  else sciChartSurface.applyTheme(new SciChartJSDarkTheme());
  return { sciChartSurface, wasmContext };


    export const updateChartWithData = (
  dataSeriesMap: Map<keyof typeof chartData, XyDataSeries>,
  theme: ExtendedTheme,
  wasmContext: TSciChart,
  sciChartSurface: SciChartSurface,
  chartData: ChartData,
  chartType: string
) => {
  const streamIds = Object.keys(chartData);
  const isLightTheme = theme.palette.type === 'light';

  if (isLightTheme) sciChartSurface.applyTheme(new SciChartJSLightTheme());
  else sciChartSurface.applyTheme(new SciChartJSDarkTheme());


  const stackedColumns: any[] = [];
  streamIds.forEach((s) => {
    const streamId = Number(s) as keyof ChartData;
    const streamSelectorId = streamId as keyof typeof chartData;
    if (dataSeriesMap.has(streamSelectorId)) {
      const xyDataSeries = dataSeriesMap.get(streamSelectorId);
      chartData[streamId].data.forEach((value) => {
        xyDataSeries?.append(value.timestamp, value.value);
    } else if (chartType === 'scatter') {
      const lineSeries = LineChart(dataSeriesMap, theme, wasmContext, chartData, streamSelectorId, streamId);

    } else if (chartType === 'bar') {
      const lineSeries = BarChart(dataSeriesMap, theme, wasmContext, chartData, streamSelectorId, streamId);
    } else {
      const lineSeries = StackedChart(dataSeriesMap, theme, wasmContext, chartData, streamSelectorId, streamId);


    export default (
  dataSeriesMap: Map<keyof typeof chartData, XyDataSeries>,
  theme: ExtendedTheme,
  wasmContext: TSciChart,
  chartData: ChartData,
  streamSelectorId: keyof typeof chartData,
  streamId: keyof ChartData
) => {
  const xyDataSeries = new XyDataSeries(wasmContext);
  dataSeriesMap.set(streamSelectorId, xyDataSeries);

  const obj = chartData[streamSelectorId];
  const stroke = obj.stroke as string;
  xyDataSeries.dataSeriesName = obj.label as string;

  chartData[streamId].data.forEach((value) => {
    xyDataSeries.append(value.timestamp, value.value);

  const lineSeries = new FastLineRenderableSeries(wasmContext, {
    strokeThickness: obj.strokeThickness,
    strokeDashArray: obj.strokeDashArray,
    dataSeries: xyDataSeries,
    animation: new WaveAnimation({ zeroLine: -1, pointDurationFraction: 0.5, duration: 1000 }),

  lineSeries.rolloverModifierProps.tooltipColor = theme.palette.background.paper;
  lineSeries.rolloverModifierProps.tooltipTextColor = theme.palette.getContrastText(stroke);
  lineSeries.rolloverModifierProps.markerColor = stroke;
  lineSeries.rolloverModifierProps.tooltipTemplate = (
    id: string,
    tooltipProps: RolloverModifierRenderableSeriesProps,
    seriesInfo: SeriesInfo,
    updateSize: (width: number, height: number) => void
  ) => {
    const { tooltipColor, tooltipTextColor, markerColor } = tooltipProps;
    const { formattedXValue, yValue, seriesName } = seriesInfo;
    const width = 192;
    const height = 60;

    updateSize(width, height);
    return `<svg width='${width}' height='${height}' class="root">
        <rect width="100%" height="100%" fill='${tooltipColor}' stroke='${markerColor}' stroke-width='2' />
         <svg width='100%'>
           <text dy="0" fill='${tooltipTextColor}'>
            <tspan x="15" y="20" class="title">${formattedXValue}</tspan>
             <tspan x="15" y="45" class="value">
              ${seriesName} | ${yValue.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
  return lineSeries;


    let _chartData: any[] = [];
export default ({
}: {
  dataSeriesMap: Map<keyof typeof chartData, XyDataSeries>;
  theme: ExtendedTheme;
  wasmContext: TSciChart;
  sciChartSurface: SciChartSurface;
  chartData: ChartData;
}) => {
  const classes = useStyles();

  const chartRef = React.useRef<any>([]);
  const [legendData, setLegendData] = React.useState<any[]>([]);

  // _chartData = [..._chartData, ...values(chartData)];
  _chartData = values(chartData);
  _chartData = uniqby(_chartData, 'groupId');
  _chartData = uniqby(_chartData, 'streamId');

  React.useEffect(() => {
    if (_chartData.length > 0 && !isEqual(chartRef.current, _chartData)) {
      chartRef.current = _chartData;
  }, [_chartData]);

  const onClick = React.useCallback(
    (item) => {
      // const xyDataSeries = dataSeriesMap.get(160);
      const _legendData = => {
        if (x.groupId === item.groupId) x.isVisible = !x.isVisible;
        return x;


  return (
    <div className={classes.root}>
      <Paper variant="outlined" square>
        { any) => (
          <div className={classes.listItem} key={item.streamId}>
              onClick={() => onClick(item)}
              style={{ color: item.stroke }}
              {item.isVisible ? <VisibilityIcon /> : <VisibilityOffIcon />}

Inside the onClick function is where I was trying to change visibility for both series. I’ve tried multiple things without any luck. I assumed it would be as simple as getting the correct series, setting the visible property and maybe a re-render if that is even needed? Like I said any advice on a better way of handling this is welcome

0 votes
0 answers

Sometimes when I call annotation.setIsHidden in a surface with RenderSurfaceGl, not works.
what should I do?

Showing 51 - 100 of 3k results