Pre loader


1 vote

From what I’ve read into chrome’s roadmap, everything seems on track for a webgpu release in May.
Is scichart taking this into account and planning to add webgpu support?
I suspect this would make quite an impact on performance, so it would be a great addition.


1 vote
0 answers


I’m using scichart for android and trying to change the color of the column that was hit by touch. I have successfully identified which index of the data series that was hit. I’ve looked all over the android documentation but does not find an answer or example for this. This is my onTouch function:

    public boolean onTouch(View view, MotionEvent motionEvent) {
        SciChartSurface surface = (SciChartSurface) view;
        touchPoint.set(motionEvent.getX(), motionEvent.getY());
        surface.translatePoint(touchPoint, surface.getRenderableSeriesArea());

        for (IRenderableSeries renderableSeries : surface.getRenderableSeries()) {
            renderableSeries.hitTest(hitTestInfo, touchPoint.x, touchPoint.y, 30);
            if (hitTestInfo.isHit) {
                Double yValue = consumptionDataSeries.getYValues().get(hitTestInfo.dataSeriesIndex);
                // Todo: Show a text annotation and color the column differently
                Toast.makeText(this.getContext(), yValue.toString(), Toast.LENGTH_SHORT).show();
        return true;

What should I do next?

1 vote


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

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

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

Thanks in advance!

1 vote


I am using a candlestick chart for a financial application and I want to add the sign and price to the highest and lowest price bar that appears on the screen as in the attached image. As the chart is scrolled, the highest price and lowest price data and location should also change. how can I do that?

Best regards.

1 vote

I am trying to listen changes in pie chart segment selections. I am adding the listener like so:

piesegment.addChangeListener { changedSegment in
    print("changed selection \(changedSegment.isSelected)")

The closure is never called however. My first question is: Is this the right way of doing this? In Android I implement the PieSegmentChangeListener interface and do an addIsSelectedChangeListener on the segment. In ios the SCIPieSegmentChangeListener is not a protocol. My second question is: How can I create a my own listener like in android and add it to the segment?

By the way support should not be exired!!!!

1 vote

I’m using SciChart in our WPF project. And we are Keeping Series and Annotations as RadObservableCollection(from Telerik) instead of ObservableCollection to get the benefits of RadObservableCollection. But when I’m adding or deleting data from RadObservableCollection it does not affect in charts. Does SciChart work with RadObservableCollection ? I’ve explored your examples and wasn’t able to found examples with RadObservableCollection.

1 vote


As you can see in the attached image, I’m using a Candlestick Chart for a financial application, but the gap between each bar on the chart is pretty small and it doesn’t look good.

I want to add a space between the bars but I couldn’t find how to do it. Can you help me?

Best regards.

1 vote


I just registered here.
I want to use your tool to create one graph. But licence is too expensive for me. May I create graph during trial mode and use it?
What if trial licence expired? Already created graph will still working or not?


1 vote
0 answers

Hello, I tried to copy an example to run in Xcode, when I changed it to SCIChartSurface3D, it show that “Type ‘SurfaceView’ does not conform to protocol ‘UIViewRepresentable'”, it is even I want to make a 3D chart I don’t need to change the ‘SCIChartSurface’ to ‘SCIChartSurface3D’ ?

and in the SCIUpdateSuspender.usingWith(self.surface), it said ‘Value of type ‘SurfaceView’ has no member ‘surface” ? did I do anything wrong ?

Thank you

-1 votes

Hi, I was trying your JavaScript 64-Chart Dashboard Performance Demo and noticed few problems about it.
It shows 60Fps and chrome Fps shows only ~15fps and that is obviously lag in my eye.

Another problem was when I resized window it started to jump up and down when fps was below 10 and after above 10 it resized it continuously. Also when labels is added in small window it start jump when try to resize charts…

When I zoomed close to mountain series it changed visual data after moved that to left so there is some problems on your algorithm what you use to group that data to screen in real time.


1 vote


  • Main graph updates based on the data from the selected Item.
  • The data and styling is independent and the style is dynamic global style for all Items.
  • The data for the graphing that is Data Series is binded to DataSet which is of type XYDataSeries<DateTime, double>.
  • DataSeries data is obtained from the datacontext which implements INotifyPropertyChanged


  • The databinding is not dynamic and the data series is not updated when the selection changes.
  • The initial data selection is reflected but any subsequent data changes are not reflected on the sci chart surface.
  • This behavior was only for the Dataseries binding and it was verified using a textbox which binds to the count of the DataSet and this updates as the selection changes but not the dataseries.

Please suggest a work around or an alternative solution so that I can predefine axes and series but swap out the data based on the selected Item. Please see the attached xaml code below.

        <Grid DockPanel.Dock="Top">
            <chart:SciChartSurface x:Name="mainView"
                    <chart:NumericAxis x:Name="AxisOne"

                    <chart:NumericAxis x:Name="AxisTwo"

                    <chart:DateTimeAxis x:Name="DateTimeAxis"/>
                    <chart:FastLineRenderableSeries x:Name="DataSet1FS"
                                                    DataSeries="{Binding DataSet1}"
        <TextBlock Text="{Binding Path=DataSet1.Count}"
                            Margin="0 -20 0 0"
1 vote

has anyone had an issue with this module?


is supposed to be imported like this but is nowhere to be found:

import { LineSeriesDataLabelProvider} from 

I’m taking this as example

I’m using angular

1 vote

Hi there,

I’m currently trying to setup scichart in Ionic-Angular, but it seems, it cannot find the and wasm files while there are here.
I followed this demo tutorial ->

The two files are correclty copy/pasted and located here as said in the example :
– ./src/
– ./src/scichart2d.wasm

but i ended with the errors present in attachments (cf scichart.pdf)

Here is my package.json :
“dependencies”: {
“@angular/common”: “^15.0.0”,
“@angular/core”: “^15.0.0”,
“@angular/forms”: “^15.0.0”,
“@angular/platform-browser”: “^15.0.0”,
“@angular/platform-browser-dynamic”: “^15.0.0”,
“@angular/router”: “^15.0.0”,
“@capacitor/app”: “4.1.1”,
“@capacitor/core”: “4.6.2”,
“@capacitor/haptics”: “4.1.0”,
“@capacitor/keyboard”: “4.1.1”,
“@capacitor/status-bar”: “4.1.1”,
“@ionic/angular”: “^6.1.9”,
“ionicons”: “^6.0.3”,
“rxjs”: “~7.5.0”,
“scichart”: “^3.0.266”,
“copy-files-from-to”: “^3.6.0”,
“tslib”: “^2.3.0”,
“zone.js”: “~0.11.4”

If you could, please, help me to understand what i’m doing wrong ?
Thanks. 🙂

0 votes

I show very low values and they show me as 0.
Although they are not.

(I tried to change the


But it didn’t help

1 vote

The project is developed on SciChart JS.

The x axis is date time numeric and y axis is numeric.

There is a option for the user to select the x axis interval. The interval values are 5 Min, 10 Min, 15 Min, 30 Min, 1 Hour, 6 Hour, 12 Hour, Days, Weeks, Months & Years.

When the user the selects a interval in the select option, the x axis should be updated with the selected interval.

For Example, If the user selects the 5 Min in the select option, then the x axis interval should be 5 Min.

For 5 Min X Axis Interval

16-Jan-2023 07:00
16-Jan-2023 07:05
16-Jan-2023 07:10
16-Jan-2023 07:15
16-Jan-2023 07:20
16-Jan-2023 07:25
16-Jan-2023 07:30

For 1 Hour X Axis Interval

16-Jan-2023 07:00
16-Jan-2023 08:00
16-Jan-2023 09:00
16-Jan-2023 10:00
16-Jan-2023 11:00
16-Jan-2023 12:00
16-Jan-2023 13:00
16-Jan-2023 14:00

So let me know how to change the interval in the x axis (date time numeric) based on the selection.

I have attached the zip file which contains the HTML file.

  • Leo Leslin asked 2 weeks ago
  • last active 1 week ago
0 votes

I’m trying to draw 3d spectrum waterfall chart using PointLineRenderableSeries3D, but the graph is flickering (when i rotate it using orbit modifier) with dashed lines. I’m trying to use different settings in my code and SciChart Examples (StrokeThickness, Opacity, Antialiasing, layout rounding, tips from this topic, but nothing helps me. I attach two images (plot 1 from SciChart Examples (dashed lines) and plot 2 – from my program (flickering)). Is there any way to make lines more clear and not flickering (something like plot 3 attached image).

1 vote
0 answers

I am trying to generate a graph where the ticks and the labels will be added from TickProvier and LabelProvider. But when there is not enough space, it doesn’t show most of the labels, where it can only skip one label in the middle of two labels (Please check the attached photo). I can not set IsLabelCullingEnabled = true as I do not want any overlap on labels.

I have shared a sample project. Here, I always want to show all the ticks generated from the TickProvider. But how can I handle the labels, so that I can decide inside LabelProvider(Or any other place) if I should set a label empty or not based on the previous label position?

1 vote
0 answers


I am new to SciCharts and I am developing line chart with multiple line series with different colors. All line series have time span on X-axis and a double value on Y-axis. I need to show time ticks after specific interval for example i need to show tick after every 30 seconds or 1 minute or 3 minute. and may else.I have also took a look at Major Delta and Minor delta but i am confused and not properly using it . And also interval can be changed with at runtime like a user can select that they want to see X-axis time tick after every 30 second or 50 second or etc. Please can you give me and example for it. I hope for Quick repsonse.

    Date majorDelta = new Date(DateIntervalUtil.fromSeconds(1));
    Date minorDelta = new Date(DateIntervalUtil.fromSeconds(30));

DateAxis xAxis = sciChartBuilder.newDateAxis()

Best Regards,

1 vote

How can we change the color(Red) of custom box annotation when it is clicked .

0 votes

I want to display a palette next to the axes, using colors to represent different energy levels

Like in the picture below

  • hundun wds asked 2 weeks ago
  • last active 2 weeks ago
1 vote

I would like to create a Box Plot chart having several data points. But I would like to set the color of each Box based on the median value.

Can you please suggest, how can I achieve this with the MVVM pattern?

Please check the attached photo for the sample design.

1 vote

How to achieve the Sci Chat functionality in JavaScript . I want to update the list instead of removing a range of data from the dataseries.

0 votes

Hi, I’m gonna make a Ocillosope SIMULATOR using SCI chart especially the example of ocilloscope.

bur the exmaple code looks like just a draw of the shape of ocilloscope.

but I need a logic of ocillo.

How can I make Ocillosope SIMULATOR chart ?

1 vote

I was trying to create a box-and-whisker diagram using the Box Plot chart. Here I found the whisker line is not showing in my case. I have tried versions and None of them worked. But, interestingly, it is working fine in version
I am sharing a sample project. Can you please check and let me know if there is any issue with the updated versions? Or if I am missing anything here?

1 vote

Hi, I asked a question a few days ago. I will try to explain better what I meant.
I get data in real time and I only care about the Y values.
My problem is that I don’t want to move forward on the X axis – but stay on a defined range
(If I move forward on the X-axis and I want to follow the graph I drew, I must define:

XAxis.AutoRange = SciChart.Charting.Visuals.Axes.AutoRange.Always;

And this means that I won’t be able to zoom properly unless I stop receiving the data, which is unacceptable.
So unless there is a way to set AutoRange = Always and still enable good zoom (similar to ZoomExtentsY for the X-axis), I need an option to keep seeing the graph all the time – without having to set AutoRange = Always so I can zoom.
I think the solution is to create a fixed range on the X-axis that the data will only be displayed on but before I implement it myself, I want to know if there is a better or built-in way to do this.

Just to make sure I’m understood, I want it to behave like in the attached images (the X-axis stays in the same range and the graph “move” to the left whenever new points enter from the right:

1 vote

Good afternoon. My team and I are looking at your library to create a depth chart, like here, but have run into a few problems:
1. if we have, for example, a “buySeries” array larger than the “sellSeries” array, the graph is not drawn very nicely.
2. the labels are not drawn correctly when we have too small numbers, I tried to solve the problem with xAxis.textFormatting = ‘0.#####’ or ‘0.00###’, but that doesn’t work for some reason.
3. If we want to add labels while hovering over the chart with showLabel = true , then we get 4 labels, two on yAxis. is it possible to make the buySeries label appear only on the left, for example, and the sellSeries label only on the right? (second screenshot)

-1 votes
0 answers

Problem: Error in displaying 2 decimal places on Y axis, the displayed value will be greater than 1.

Requirements: The date displayed on the X axis of my data, and the date displayed on the Y axis are mostly 2 decimal places, but I need to click the broken line to highlight the broken line.

The code is as follows

import { SeriesSelectionModifier } from “scichart/Charting/ChartModifiers/SeriesSelectionModifier”;
import { XyDataSeries } from “scichart/Charting/Model/XyDataSeries”;
import { SciChartJSLightTheme } from “scichart/Charting/Themes/SciChartJSLightTheme”;
import { NumericAxis } from “scichart/Charting/Visuals/Axis/NumericAxis”;
import { EllipsePointMarker } from “scichart/Charting/Visuals/PointMarkers/EllipsePointMarker”;
import { FastLineRenderableSeries } from “scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries”;
import { NumberRange } from “scichart/Core/NumberRange”;
import { EAxisAlignment } from “scichart/types/AxisAlignment”;
import { ELabelAlignment } from “scichart/types/LabelAlignment”;
import { SciChartSurface } from “scichart”;
import {RubberBandXyZoomModifier} from “scichart/Charting/ChartModifiers/RubberBandXyZoomModifier”;
import {MouseWheelZoomModifier} from “scichart/Charting/ChartModifiers/MouseWheelZoomModifier”;
import {ZoomExtentsModifier} from “scichart/Charting/ChartModifiers/ZoomExtentsModifier”;
import { TextLabelProvider } from “scichart/Charting/Visuals/Axis/LabelProvider/TextLabelProvider”;
import { Thickness } from “scichart/Core/Thickness”;

const dataData = [
“2022-12-21 13:12:45”,
“2022-12-21 12:22:46”,
“2022-12-21 11:32:47”,
“2022-12-21 10:42:41”,
“2022-12-21 09:52:38”,
“2022-12-21 09:02:32”,
“2022-12-21 08:12:28”,
“2022-12-21 07:22:26”,
“2022-12-21 06:32:26”,
“2022-12-21 02:32:17”,
“2022-12-21 01:42:20”,
“2022-12-21 00:52:12”,
“2022-12-21 00:02:15”,
“2022-12-20 23:12:15”,
“2022-12-20 22:22:17”,
“2022-12-20 21:32:44”,
“2022-12-20 20:42:41”,
“2022-12-20 19:52:43”,
“2022-12-20 19:02:42”,
“2022-12-20 18:12:44”,
“2022-12-20 17:22:42”,
“2022-12-20 16:32:37”,
“2022-12-20 15:42:34”,
“2022-12-20 14:52:34”,
“2022-12-20 14:02:35”,
“2022-12-20 13:12:29”,
“2022-12-20 12:24:37”,
“2022-12-20 10:42:37”,
“2022-12-20 09:52:37”,
“2022-12-20 09:02:19”,
“2022-12-20 04:52:00”,
“2022-12-20 04:02:29”,
“2022-12-20 03:12:29”,
“2022-12-20 02:22:30”,
“2022-12-20 01:32:31”,
“2022-12-20 00:42:25”
const divElementId = “scichart-root”;
const drawExample = async () => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);
const xAxis = new NumericAxis(wasmContext);
const labelProvider = new TextLabelProvider({
// When passed as an array, labels will be used in order
labels: dataData,
maxLength: 188
xAxis.labelProvider = labelProvider;
xAxis.labelStyle.alignment = ELabelAlignment.Center;
xAxis.labelStyle.padding = new Thickness(2, 1, 2, 1);
xAxis.axisRenderer.hideOverlappingLabels = false;
xAxis.axisRenderer.keepLabelsWithinAxis = false;
new NumericAxis(wasmContext, {
growBy: new NumberRange(0.05, 0.05),
id: EAxisAlignment.Left.toString(),
axisAlignment: EAxisAlignment.Left,
labelPrecision: 0,
labelStyle: { alignment: ELabelAlignment.Left }
new NumericAxis(wasmContext, {
growBy: new NumberRange(0.05, 0.05),
id: EAxisAlignment.Right.toString(),
axisAlignment: EAxisAlignment.Right,
labelPrecision: 0,
labelStyle: { alignment: ELabelAlignment.Right }
sciChartSurface.applyTheme(new SciChartJSLightTheme());
sciChartSurface.chartModifiers.add(new SeriesSelectionModifier({ enableHover: true, enableSelection: true }));

const seriesCount = 3;
const seriesPointCount = dataData.length-1;

const s = sciChartSurface.suspendUpdates();
const xValues=Array.from(Array(dataData.length), (v,k) =>++k);
for (let i = 0; i < 5; i++) {
const alignment = i % 2 === 0 ? EAxisAlignment.Left : EAxisAlignment.Right;
const yValues=Array.from(Array(dataData.length), () =>Math.floor(Math.random()*100)/100);
const lineSeries = new FastLineRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, { xValues, yValues, dataSeriesName: “Series ” + i }),
strokeThickness: 2,
stroke: “Blue”,
opacity: 0.5,
yAxisId: alignment.toString(),
onSelectedChanged: (sourceSeries, isSelected) => {
sourceSeries.strokeThickness = isSelected ? 5 : 2;
sourceSeries.stroke = isSelected ? “Purple” : “Blue”;
sourceSeries.rolloverModifierProps.tooltipDataTemplate=isSelected ? “wezisadasdasdd” : ”;
sourceSeries.pointMarker = isSelected
? new EllipsePointMarker(wasmContext, {
width: 9,
height: 9,
strokeThickness: 1,
stroke: “White”,
fill: “Purple”
: undefined;
onHoveredChanged: (sourceSeries, isHovered) => {
sourceSeries.opacity = isHovered ? 1.0 : 0.7;
sourceSeries.strokeThickness = isHovered ? 2 : 1;
const mouseWheelZoomModifier = new MouseWheelZoomModifier();
const rubberBandZoomModifier = new RubberBandXyZoomModifier();
const zoomExtentsModifier = new ZoomExtentsModifier();
// sciChartSurface.chartModifiers.add(rubberBandZoomModifier);
return { sciChartSurface, wasmContext };


1 vote

I get data in real time and I only care about the Y values.
I want to define a range of values on the X axis that will be fixed (but if I want I can change it from time to time)
For example: define that the range will be from 0 to 1000 and all the information that arrives will be displayed only in this range. And when I pass the 1000 points it will simply “push” the older points aside.
For example: the point located at X=2 will move to X=1, 1 will move to 0 and 0 will leave the graph…
During the program I want of course to give the user the possibility to change this range if he wants.
The optimal way for me was to define a range of the X axis and when I do Append(), add only Y values so that they enter the next place on the X axis in order…
Is there an option in the API to set this? If not, how is it recommended to do it?

1 vote

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

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

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

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

I have attached the image for your reference.

I have attached the zip file with the html file.

  • Leo Leslin asked 1 month ago
  • last active 3 weeks ago
0 votes

Now I’m making 2D line chart, using example file.

but I want to make a chart from my data. I have a data file.

Unfoltunately, I don’t know how to connect my data with source code.

please let me know the solution.

  • How to connect my data and source code(2D Line chart example code)?
0 votes

In financial markets, there is a type of chart that is as follows.

I did not find this type of chart in SciChart.

Please help me how to draw this chart

1 vote

We are using JavaScript Chart Editable Annotations but we need some more modificaions in that which can enhance this feature in terms of user experience.
Currently when the anonations are loaded they are havinng a fixed shape but we want the annotations to be draggable as soon as they are loaded in the charts whitout any extra clicks,this feature is provided by tradingView charts and we also want to provide the same to our users.
I have attached images and videos for better understanding of the issue.
Hope we can get the solution of this issue asap.

Please refer to the below video link for beter understanding.

1 vote

Trying to install SciChart using the PodSpecs-Nightly repo:

source ‘’

Running pod install results in this error:

[!] Error installing SciChart
[!] /usr/bin/curl -f -L -o /var/folders/mr/0skn4y5d1t99bcvzd09g_wdr0000gn/T/d20221220-30745-gfzfrf/ --create-dirs --netrc-optional --retry 2 -A 'CocoaPods/1.11.3 cocoapods-downloader/1.6.3'
curl: (22) The requested URL returned error: 404

Notice the word “SDK” is missing from the URL above. The correct URL should be:

1 vote
0 answers

I need to create a multi line chart along with a seekbar at bottom and If user moves the seekbar then line chart should show a tooltip or marker view at that point.

1 vote

I’m having issues with displaying my vertical annotations on my chart. Below is the code for creating the annotation and adding it to the chart.

var annotationLine = new VerticalLineAnnotation();
annotationLine.XAxisId = XAxisID;
annotationLine.YAxisId = YAxisID;
annotationLine.Stroke = new SolidColorBrush(Colors.Blue);
annotationLine.StrokeThickness = 2;
annotationLine.IsHidden = false;
annotationLine.AnnotationCanvas = AnnotationCanvas.BelowChart;
annotationLine.Y1 = 0;
annotationLine.Y2 = ControlHeight;
annotationLine.X1 = xValues[i];

I have verified that the XAxisId and the YAxisId are correct and match the id of the only axes that I have on the chart
I have verified that the xValues[i] is a valid value on the chart and within the bounds of the viewport

The tricky part here is that I am reading live streaming EEG data from a device and inserting manual triggers into the data. This works fine and the annotations appear in the chart as they are within the bounds of the chart.
I then record that data to a file (currently csv but will be doing EDF as soon as I get this figured out) where the annotation data is present (verified)
It’s when I try to read the file into my application that I can’t get the annotations to appear on the SciChart. I’m using the code above for both the live streaming data (working) and the file reading (not working) so I’m really baffled by this and could use any insight anyone has.

Thank you

1 vote

I download the iOS library via cocoapods. Today running ‘pod update’ results in the error below. It seems the ZIP file is not available on the server.

Installing SciChart (was
[!] Error installing SciChart
[!] /usr/bin/curl -f -L -o /var/folders/mr/0skn4y5d1t99bcvzd09g_wdr0000gn/T/d20221217-6770-1dkgzs/ --create-dirs --netrc-optional --retry 2 -A 'CocoaPods/1.11.3 cocoapods-downloader/1.6.3'

curl: (22) The requested URL returned error: 404

I tried to download the zip file manually and it failed. When I modified the URL to download the previous release ( it worked.

1 vote

I want to access the SciTrader application source so that I can implement the features I need by checking it.

Please guide me to access this source code

1 vote

Hello SciCharts Team,

I have multiple data series of <date, double> Type with no:of sample points ranging in the magnitude of Millions (Not realtime). Is there a way to have a blanket model graph fitting available for the data out of the box? Right now even with default resampling provided by the Sci charts, the number of points plotted on the screen is more than what is optimal. I looking for a solution, where I can keep a constant n data points on the screen irrelevant of the zoom state.

I have attempted to use the resampling on the IRenderableSeries as provided by default by the Sci charts. Please find the screenshots for those graphs attached. The graph is not visually appealing or hard to analyze because of the high data point density. This is the major reason why I’m requesting an alternative/method to improve the visualization.

I have achieved this previously by a resampling strategy to show a maximum of n points on the screen. Let’s say the screen accommodates 2k points (n = 2k) for example, (sample total) 2M points will be aggregated to 6000k points, 2k as average, 2k as max, and 2k as min. Just an idea for thought. I’m sure there might be better ways of doing this. Please provide me with some suggestions to improve this scenario.


1 vote

I receive data at a very high speed from a hardware board and need to plot it on a SciChartSurface.
the sample is FastLineRenderableSeries

   <s:SciChartSurface x:Name="sciChart0" MaxFrameRate="5" 
                s:VisualXcceleratorEngine.FallbackType="{x:Type s:HighQualityRenderSurface}"
                  <s:FastLineRenderableSeries   x:Name="RenderableSeries1" DataSeries="{Binding Series, 
                     Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>


while Series is XyDataSeries<double, double>
I created a thread that opens a socket (on port 3490) and all the information it receives it draws on the graph.
The problem is that if some time passes, and I stop the transmission of the data, it still draws what it has left to draw to “reach the end of the buffer”. It makes me realize that he is not keeping up with the transmission and it takes him more time to draw than the time it takes for the information to arrive.
(If I start the transmission and let it draw, and then stop quickly, it does stop immediately. The problem is if a lot of information arrives over time).
I wanted to ask if there is a way to speed it up in some way? (Maybe by giving up the plotting quality?)
Since I need to draw the information that arrives in real time and not information that arrived a few seconds ago…
The drawing is done by a separate thread:

i’m using Append():

Series.Append(double[XPoints] array, double[YPoints] array);
1 vote

I am facing a little hurdle in plotting the date value to the chart.

How to add the date to chart x axis and numeric value to the y axis?
Please provide a example to add the date in x axis and numeric value in the y axis.

Please provide a example with one series in the y axis.

I have a requirement to plot the patient vital signs, the date value in x axis and vital signs in y axis.
x – Date when the vital sign is captured
y1, y2, y3, y4, y5 – BP, Heart rate & other vital signs

The model data looks like below.

{“x”:”29-Nov-2022 04:37″,”y1″:”119″,”y2″:”80″,”y3″:”15″,”y4″:”23.6″,”y5″:”86″},
{“x”:”29-Nov-2022 04:38″,”y1″:”119″,”y2″:”80″,”y3″:”15″,”y4″:”23.6″,”y5″:”87″},
{“x”:”29-Nov-2022 04:39″,”y1″:”119″,”y2″:”80″,”y3″:”15″,”y4″:”23.6″,”y5″:”86″}

0 votes


I am currently working on a proof of concept to move make our software cross platform. Currently, we use the WPF charting package but we have the full bundle so we have access to all the charts. I’m working on a Maui Blazor app where the UI and its logic are stored in a razor class lib and most of the services are stored in the shared WebAssembly project. Ideally, I would like to create the chart data inside a service and then create the appropriate views for each platform using the platform specific charts. Eventually my plan is to have a Blazor WASM project that we host online (where users can view their data), a Maui app that will run on Windows and Mac, and a WPF app that will host the project on computers that aren’t running Windows 10 and 11.

Are there any plans to implement a shared library of some type for the IRenderableSeriesViewModel, IDataSeries, IPaletteProvider, etc. where we could reference these interfaces regardless of platform?

Thank you,

Tim Stephansen

0 votes

Hi All!

I have a syncfusion theme (MaterialDark) applied to my WPF app.

Without the theme applied, I can set the background color of a TextAnnotaion in the normal way in bothe XAML and c#, no problem.

When I apply the theme, it overrides this setting and renders the TextAnnotation with a black background and no matter what I try, I

can’t seem to get rid of it.

I have tried:

  1. setting up a Resource dictionary in XAML

  2. setting the style to null and then applying inline style (in both code behind and XAML)

Nothing seems to work!

Has anyone encountered this issue beforew or know of any solutions?

It’s driving me mad!

1 vote


Im working with Scichart JS on a React project and trying to write some tests using Jest.
I managed to start a browser environment with webgl support to run the tests, but I’m having a hard time to provide the .data and .wasm files to this environment.

This is what i’m trying to run:

import {SciChartSurface} from 'scichart/Charting/Visuals/SciChartSurface';

const buildSurface = async () => {
    const {sciChartSurface} = await SciChartSurface.create('test-surface', {
        viewportBorder: {border: 1}
    return {sciChartSurface};

it('should build a surface', async () => {
    document.body.innerHTML = `<div id="test-surface"></div>`;
    const response = await buildSurface();
    const {sciChartSurface} = response;

and I’m getting lots of warns an errors like:

console.warn    both async and sync fetching of the wasm failed
console.error    Could not load SciChart WebAssembly module.
                    Check your build process and ensure that your scichart2d.wasm, and scichart2d.js files are from the same version
console.error   Error: Uncaught [Error: NetworkError for:]
thrown: "Could not load SciChart WebAssembly module.
                    Check your build process and ensure that your scichart2d.wasm, and scichart2d.js files are from the same version"

Does anyone know how to setup a sufficient environment on jest to successfully build a scichart surface?

1 vote

Hi. Is it possible to implement a depth chart like in the screenshot using scichart?! depth chart

  • alex korzh asked 2 months ago
  • last active 1 month ago
1 vote

I have a chart that allow users to add one BoxAnnotation and multiple CustomAnnotation (a marker). I got error and failed to drag the BoxAnnotation with the following steps:

Step 1: Call the addMarkerAnnotation() to add a CustomAnnotation

const markerSvgString = '<svg height="26" width="18" xmlns="">' +
    '<polygon id="SVG_ID" fill="#000" fill-opacity="0.5" stroke="#00fc00" stroke-width="1.5" points="0,12 8,0 16,12 8,24" clip-path="url(#clip_normal)" />' +
    '<clipPath id="clip_normal"><use xlink:href="#SVG_ID"/></clipPath>' +
    '<text x="5" y="16" fill="#00fc00" font-weight="bold" font-size = "12">MARKER_ID</text>' +

const deltaSvgString = '<svg height="28" width="28" xmlns="">' +
    '<polygon id="SVG_ID" fill="#000" fill-opacity="0.5" stroke="#00fc00" stroke-width="1.5" points="0,0 12,24 22,0" clip-path="url(#clip_delta)" />' +
    '<clipPath id="clip_delta"><use xlink:href="#SVG_ID"/></clipPath>' +
    '<text x="5" y="10" fill="#00fc00" font-weight="bold" font-size="10">MARKER_ID</text>' +

const addMarkerAnnotation = useCallback((markerId, mode, x1, y1) => {   
    x1 = parseFloat(x1);
    y1 = parseFloat(y1);

    if (x1 != null && y1 != null) {
        let svgString;
        const svgId = "markerSvg_" + markerId;

        if (mode.includes("Delta")) {
            const compareMarkerKey = mode.replace("Delta ", "");
            svgString = deltaSvgString.replace(/MARKER_ID/g, (parseInt(markerId)+1) + "-" + compareMarkerKey);
        } else {
            svgString = markerSvgString.replace(/MARKER_ID/g, parseInt(markerId)+1);
        svgString = svgString.replace(/SVG_ID/g, svgId);

        markerAnnotations.current[markerId] = new CustomAnnotation({
            id: markerId,
            isEditable: true,
            isSelected: true,
            verticalAnchorPoint: EVerticalAnchorPoint.Center,
            horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
            svgString: svgString

        markerAnnotations.current[markerId].dragEnded.handlers.push(() => {
            let annotation = markerAnnotations.current[markerId];
            let freq = annotation.x1 * FREQ_UNITS.KHZ;

            markersInfoSetter.current[markerId](origMarkerInfo => ({...origMarkerInfo, ...{freq: freq.toFixed(numDP.FREQ), power: annotation.y1.toFixed(numDP.POWER)}}));

            if (markersInfoObj.current[markerId].mode !== "Fixed") {
                getMarkerPeak(markerId, markersInfoObj.current[markerId].trace, annotation.x1 * FREQ_UNITS.GHZ);
}, [deltaSvgString, markerSvgString, getMarkerPeak, reorderMarkers, numDP]);

Step 2: Call the removeMarkerAnnotation() to remove the CustomAnnotation

const removeMarkerAnnotation = useCallback((markerId) => {
    if (markerAnnotations.current[markerId]) {
        markerAnnotations.current[markerId] = null;
}, []);

Step 3: Call addTriggerAnnotation() to add a BoxAnnotation

const addTriggerAnnotation = useCallback((x1, x2, y2) => {
    x1 = parseFloat(x1);
    x2 = parseFloat(x2);    
    y2 = parseFloat(y2);

    if (x1 != null && x2 != null) {
        console.log("addTriggerAnnotation: ", x1, x2, triggerAnnotation.current, sciChartSurfaceRef.current.annotations);
        if (!triggerAnnotation.current) {
            triggerAnnotation.current = new BoxAnnotation({
                id: "triggerBox",
                fill: "transparent",
                stroke: "#93A3B1",  //#93A3B1   //#6B818C
                strokeThickness: 2,
                xCoordinateMode: ECoordinateMode.DataValue,
                x1: x1,
                x2: x2,
                yCoordinateMode: ECoordinateMode.DataValue,
                y1: minY,
                y2: y2,
                isEditable: true,
                resizeDirections: EXyDirection.XyDirection,     

            triggerAnnotation.current.dragDelta.handlers.push(() => {
                triggerAnnotation.current.y1 = minY;

                const minX =  specSettingsRef.current.start/freqUnits.KHZ;
                const maxX = specSettingsRef.current.stop/freqUnits.KHZ;
                const maxY = specSettingsRef.current.refLevel;

                if (minX != null && maxX != null) {
                    if (triggerAnnotation.current.x1 < minX) {
                        triggerAnnotation.current.x1 = minX;
                    } else if (triggerAnnotation.current.x1 > maxX) {
                        triggerAnnotation.current.x1 = maxX;
                    } else if (triggerAnnotation.current.x2 > maxX) {
                        triggerAnnotation.current.x2 = maxX;
                    } else if (triggerAnnotation.current.x2 < minX) {
                        triggerAnnotation.current.x2 = minX;

                if (maxY != null) {
                    if (triggerAnnotation.current.y2 < minY) {
                        triggerAnnotation.current.y2 = minY;
                    } else if (triggerAnnotation.current.y2 > maxY) {
                        triggerAnnotation.current.y2 = maxY;

            triggerAnnotation.current.dragEnded.handlers.push(() => {
                const maxX = specSettingsRef.current.stop/freqUnits.KHZ;
                const x1 = triggerAnnotation.current.x1;
                const x2 = triggerAnnotation.current.x2;
                const y2 = triggerAnnotation.current.y2;

                if (x1 != null && x2 != null && maxX != null) {
                    if (x1 > x2) {
                        triggerAnnotation.current.x1 = x2;
                        triggerAnnotation.current.x2 = x1;
                    } else if (x2 < x1) {
                        triggerAnnotation.current.x1 = x2;
                        triggerAnnotation.current.x2 = x1;
                    } else if (x1 === x2) {
                        if (x2 + xInterval.current <= maxX) {
                            triggerAnnotation.current.x2 = x2 + xInterval.current;
                        } else {
                            triggerAnnotation.current.x1  = x1 - xInterval.current;

                    const origStartFreq = parseFloat(triggersRef.current.startFreq);
                    const origStopFreq = parseFloat(triggersRef.current.stopFreq);
                    const newStartFreq = parseFloat((triggerAnnotation.current.x1 * freqUnits.KHZ).toFixed(numDP.FREQ));
                    const newStopFreq = parseFloat((triggerAnnotation.current.x2 * freqUnits.KHZ).toFixed(numDP.FREQ));

                    if (origStartFreq !== newStartFreq || origStopFreq !== newStopFreq) {
                        setTriggers(origObj => ({...origObj, ...{
                            startFreq: newStartFreq, 
                            stopFreq: newStopFreq,
                            level: parseFloat(y2.toFixed(numDP.POWER)),
        } else {
            updateTriggerAnnotation(x1, x2, y2);
}, [setTriggers, freqUnits.KHZ, numDP.FREQ, numDP.POWER, minY, updateTriggerAnnotation]);

Step 4: Drag the BoxAnnotation. It’s failed to drag the box and got the error “Uncaught TypeError: Cannot read properties of undefined (reading ‘seriesViewRect’)”.

It’s a strange bug as it can only be reproduced with the steps above. With the following steps, I can drag the BoxAnnoation without problem:

Step 1 -> Step 3 -> Step 4
Step 3 -> Step 4
Step 3 -> Step 1 -> Step 2 -> Step 4

  • Quyen Sy asked 2 months ago
  • last active 1 month ago
1 vote

Implementation scenario: multiple polylines are displayed. After clicking the polyline, the name of the polyline is displayed in the icon.

Question: I can get the Series Name through the SeriesSelectionModifier now, but I don’t know how to display the Series Name in the chart when the user clicks a polyline. Is there a corresponding API?

1 vote

I have a huge dataset to display in graphical form starting from the daily data for 30 days and then to each minute when zoom in, what is the best way to plot this data using zoom in functionality

  • Umer Nawaz asked 2 months ago
  • last active 1 month ago
1 vote

I am getting an error for “Data has been Appended to a DataSeries which is unsorted in the X-Direction” and trying “to disable this warning and allow unsorted data, by seting DataSeries.AcceptsUnsortedData = true”. I am trying to place this is Data series but its not working. Can you please guide me where I can set this and it doesnot throw an error for unsorted data.

1 vote

I use SeriesSelection modifier on SciChartSurface. I need only one series to be selected at a particular time (even if I try to select with ctrl pressed). Is there any modifier setting for this?

0 votes

When I try to bind VisibleRange as a simple binding on the XAxis it works perfectly.

                    <scichart:NumericAxis AxisTitle="Tempo (s)" 
                                          VisibleRange="{Binding XVisibleRange, Mode=TwoWay}"/>

But, in my case I have only one chart beeing displayed but two “RenderableSeries” in which only one of them is displayed, accordingly to the user selection. I use triggers for this and it works like a charm.


                    <Style TargetType="{x:Type scichart:SciChartSurface}">
                            <DataTrigger Binding="{Binding ElementName=DAQ1_Selected, Path=IsChecked}" Value="true">
                                <Setter Property="RenderableSeries" Value="{scichart:SeriesBinding RenderableSeriesViewModels[0]}"/>
                            <DataTrigger Binding="{Binding ElementName=DAQ1_Selected, Path=IsChecked}" Value="false">
                                <Setter Property="RenderableSeries" Value="{scichart:SeriesBinding RenderableSeriesViewModels[1]}"/>


Now I’m trying to set the “VisibleRange” of each “RenderableSeries” with triggers but I cannot achieve that because there is no option to binding on the setter.

                            <scichart:NumericAxis AxisTitle="Tempo (s)" 

                                <Style TargetType="{x:Type scichart:NumericAxis}">
                                        <DataTrigger Binding="{Binding ElementName=DAQ1_Selected, Path=IsChecked}" Value="true">
                                            <Setter Property="VisibleRange" Value="{scichart:AxesBinding XVisibleRange[0], Mode=TwoWay}" />
                                        <DataTrigger Binding="{Binding ElementName=DAQ1_Selected, Path=IsChecked}" Value="false">
                                            <Setter Property="VisibleRange" Value="{scichart:AxesBinding XVisibleRange[1], Mode=TwoWay}" />


On the “value” of Setter I have only the following options:

  • AnnotationsBinding AxisBindingBinding MultiBindingCompatible
    SeriesBinding ThemeBinding VerticalLinesBinding

My question is:
Is there a way to binding “VisibleRange” on “Style.Triggers”?

Thank you,
Eduardo Arruda

Showing 1 - 50 of 4k results

Try SciChart Today

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

Start TrialCase Studies