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
0 answers

Hi together,

my XValues = e.g [1,2,3,4,5]

im currently using a VerticalSliceModifier with UseInterpolation set to false but the VerticalLine Label still displays values like 1.22.
When using a rollover modifier with UseInterpolation set to false i only get the expected dataValue e.g 1.

Why is the verticalSlice modifier ignoring this and how do i fix this.

ps: I´ve attached an screenshot from an sample project.

Thank you in advance.

Best regards,

0 votes
0 answers

I’ve played around with the DataPointSelectionModifier and the ability to select a data point in a series on the chart (visually). Now I want the user to be able to relocate it on the chart by dragging it. I’m also going to need to allow the user to delete the point as well, perhaps click it and then hit the delete button on the keyboard.

I’m not finding any way to do this, but it seems this must be a feature.

0 votes


I am looking for a way to unselect the annotation programatically. setting isSelected to false is not adviced and also does not really unselect the annotation (just remove the adorner 🙂 )

I want to provide an ability to hit “Esc” to unselect the annotation.

Please advice.



0 votes
0 answers

Are there any native tools that will a user to drag/drop/delete points on a line series? I have a customer requirement that will allow the user to manually edit my series.

0 votes
0 answers


With older version of SciChart in iOS some of the methods are not found. And migration doc couldnt help much. drawBands function from SCINumericAxis is removed from the latest version. How to handle this with the latest?

For drawing custom bands is it supposed to use annotations instead of drawing bands?

Thanks in advance

0 votes
0 answers

we have a problem while executing our unit tests on our jenkins server.
The unit tests are run via the Nunit Console Runner.
In one specific Test project the unit test aborts with a “SocketException”.
The output looks like this:

Test Files D:\dev\jenkins\workspace\c\build\test....\source\Exec64_Release\Test.dll
Writing out DLLs to C:\Users\user\AppData\Local\SciChart\Dependencies\v8.1.0.27856\x64
System.Net.Sockets.SocketException : No connection could be made because the target machine actively refused it

So because there is the line with “Writing out Dlls ….” which contains SciChart and the next line is the SocketException I just wanted to ask if there is something in SciChart which tries to connect to the localhost, I don’t know e.g. the licensing?
I don’t want to blame SciChart, I just want to ask if it could be possible. Because it is not easy to debug this scenario reliantly.

Best Regards,

0 votes
0 answers

The note at the bottom of this page says:
“This feature can be used to create a Scatter Series, if strokeStyle contains a transparent Pen.”

If I set the lines stroke to transparent and set a point marker, nothing is rendered

    val rSeriesPL: IRenderableSeries = FastLineRenderableSeries()
    rSeriesPL.dataSeries = serPL
    rSeriesPL.strokeStyle = SolidPenStyle(0x01000000.toInt(), false, 20f, null) <<<< this works as the line is almost transparent (points show full red), but if I set it to 0x00FF0000, the point markers disappear too
    val scatterPointMarkerPL = EllipsePointMarker()
    scatterPointMarkerPL.setSize(10, 10)
    scatterPointMarkerPL.fillStyle = SolidBrushStyle(Color.Red.toArgb())
    scatterPointMarkerPL.strokeStyle = SolidPenStyle(Color.Red.toArgb(), false, 1f, null)
    rSeriesPL.pointMarker = scatterPointMarkerPL

This is in the android simulator (Just mentioning it because I’ve noticed other/unrelated oddness in the ios simulator)

  • w p asked 1 week ago
  • last active 2 days ago
1 vote

We’re working on a Nyquist plot using the latest SciChart SDK for WPF.
We have quite a MVVM dependent structure already in place.

We are working with 3D frequency based Complex data. The Nyquist plot would have 2 axes – Y for Imaginary values and X axis for Real values. We apply some averaging and post-processing of the 3D data to put in 2D form and show it in the Nyquist plot.

However, we’d like to be able to scroll the data at certain frequency ranges without showing the actual frequency graph in the plot. Is there a possibility to implement an independent scrollbar containing a averaged magnitude graph (similar idea to the processing of the Nyquist data) over a frequency range? We’d like to scroll this frequency range and on selected range changed to recalculate data in the Nyquist plot.

We have quite an extensive graphing structure implemented already. The main issue I’m currently facing is that the scrollbar is bound to the SciChartSurface and I cannot seem to figure out how to build it more like a “sexy” frequency range selector while staying within the SciChart library? Is there any possibility to not be bound to the SciChartSurface? And of course, the axes are quite different – in the Nyquist we have linear real and imaginary values (-2 to +2, for example) whereas the frequency range would extend much further data-wise (0 – 3000 Hz, for example).

Any help would be appreciated. Feel free to ask for more details.

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
0 answers


I am building an application where I use a WPF class library that calls sciChartSurface multiple times within my MainWindow application. Please refer to the attached screenshot.
I want to ensure that the Y-axis label widths are consistent across multiple chart surfaces. Specifically, I need a way to measure the total Y-axis label area of each chart and then set all the charts (with smaller Y-axis label areas) to match the chart with the largest Y-axis label area.
Additionally, I need the X-axis labels of all the charts to be synchronized, even when they contain different series configured as either single-axis or multi-axis.
Any suggestions or solutions to achieve this would be greatly appreciated.

Thank you.

1 vote

Memory leak in Fifo mode with Visual Xccelerator Engine enabled.

Two screenshots with Visual Xccelerator Engine enabled and disabled.
In a real application, the behavior is repeated. GS.Collect does not solve the problem.

It looks like the problem occurs on the integrated video card. AMD. When switching to a discrete video card. Memory is stable.

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 2 months ago
  • last active 6 days ago
0 votes
0 answers

I am trying to modify the tooltip with the following code:

function tooltipTemplate(
id: string,
seriesInfo: SeriesInfo,
rolloverTooltip: RolloverTooltipSvgAnnotation
) {
return <svg width="120" height="16">
<rect x="0" y="0" width="100%" height="100%" fill="${seriesInfo.stroke}"/>
<svg width="100%">
<text y="0" x="0" font-size="12" font-family="Verdana" dy="0" fill="white">
<tspan x="4" dy="1em">${seriesInfo.seriesName}: ${seriesInfo.formattedYValue}</tspan>

It is working but now all the tooltip are on top of each other, how can I fix that?

0 votes
0 answers

The real-time graph only shows the data of the last minute on the x-axis, and the VisibleRange property setting is invalid

private void InitializeChart()
    for (int i = 0; i < 50; i++)
        var dataSeries = new XyDataSeries<DateTime, double> { FifoCapacity = 10 };
        Color color = Color.FromArgb(0xAA, (byte)random.Next(1, 256), (byte)random.Next(1, 256), (byte)random.Next(1, 256));
        var lineSeries = new FastLineRenderableSeries()
            DataSeries = dataSeries,
            StrokeThickness = 2,
            Stroke = color

private void StartTimer()
var timer = new Timer(1000);
timer.Elapsed += (sender, e) =>
Dispatcher.Invoke(() =>
var currentDate = DateTime.Now;
for (int i = 0; i < fastLines.Count; i++)
var xAxis = sciChart.XAxes.OfType().FirstOrDefault();
if (xAxis != null&& xAxis.DataRange!=null)
var newRange = new DateRange(currentDate.AddSeconds(-60), currentDate);

                fastLines[i].XRange.Min = newRange.Min;
                //xAxis.VisibleRange = newRange;
                Application.Current.Dispatcher.BeginInvoke((Action)(() =>
            if (fastLines[i].Count > 5 &&i>40)
            double y = (i + 1);
            fastLines[i].Append(currentDate, y);


0 votes
0 answers

Hi, I’ve been looking for alternatives to ChartJS and so far really like what I’m seeing with SciChart, but was just curious if there’s any JS support for Radar Charts? I can see that it’s supported in the WPF version, but haven’t been able to find any similar documentation regarding the JS version


0 votes
0 answers

Is tvOS easily supported?

I get the following build error because tvOS isn’t listed in the package platforms:
/While building for tvOS Simulator, no library for this platform was found in ‘/Users/me/Library/Developer/Xcode/DerivedData/blahhhhhhhhhh/SourcePackages/artifacts/scichart-sp/SciChart/SciChart.xcframework’.

I suspect all the user interaction code would break on tvOS, but I’m just looking for static charts.

I found this which implies its possible, but the post is quite old.

  • w p asked 1 week ago
0 votes

We are developing an application whose main task is to display charts and allow users to add indicators to these charts. We have two requirements for drawing lines on the chart upon button click:

Option 1 (2 clicks):
– The user clicks on point A.
– The user moves the cursor over the chart and sees a line from point A to
the cursor (the line changes length with each mouse movement).
– On the second click, the line takes on the final parameters of the
second click.

Option 2 (mousedown && mouseup ):

  • I press the mouse on point A but do not release it.
  • I move the cursor over the chart (the line changes length with each mouse movement).
  • I release the mouse, and the line is drawn.

Is either of these options feasible? If not, is there any possibility of drawing lines through any user interaction?

At the moment, we have implemented line drawing by clicking on a point, and at that point, a short line is drawn that the user can adjust as they wish. However, there is a minor issue with retrieving the X and Y values:
const mouseX = clickEvent.offsetX;
const mouseY = clickEvent.offsetY;

const xValue = this.sciChartSurface.xAxes.get(0).getCurrentCoordinateCalculator().getDataValue(mouseX);
const yValue = this.sciChartSurface.yAxes.get(0).getCurrentCoordinateCalculator().getDataValue(mouseY);
These values are always shifted to the right and downward. Is there any additional trick I should use to fix it?

Thanks in advance.

Best regards,

Link to chart:

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 acceleration in the browser available we do not want to render the SciChart surface.


0 votes


In my project I am using Non-Uniform Heatmap chart. My problem is that when I zoom in/out the performance is very poor and the FPS drops down a lot. First I thought the problem might be the size of heatmap I was rendering 10 x 3000, but then I tried to run example code from and it has the same performance issue with zValue of size 3×3

In my project I also use Uniform Heatmaps and these don’t have any visible performance issue, even for large amount of data.

I would be very grateful for your help in this matter

0 votes

Hi, I javascript I have a sciChart and I am using the RolloverModifier.
With this code

            new RolloverModifier({
                showRolloverLine: true,
                tooltipDataTemplate: getTooltipDataTemplate,
                placementDivId: "tooltip-div-id",
const getTooltipDataTemplate = (seriesInfo, tooltipTitle, tooltipLabelX, tooltipLabelY) => {
            // Lines here are returned to the tooltip and displayed as text-line per tooltip
            const lines = [];
            const val = seriesInfo.yValue;
            const x = seriesInfo.formattedXValue
            lines.push(`Exposure ${Math.trunc(x)}`)
            if(seriesInfo.seriesName.includes('T8') && val != null) { lines.push(`${tooltipTitle}: ${val.toFixed(1)} °C` ); }
            if(seriesInfo.seriesName.includes('HU') && val != null) { lines.push(`${tooltipTitle}: ${val.toFixed(2)} %` ); }
            if(seriesInfo.seriesName.includes('mA') && val != null) { lines.push(`${tooltipTitle}: ${val} mA` ); }
            if(seriesInfo.seriesName.includes('Factor') && val != null) { lines.push(`${tooltipTitle}: ${val.toFixed(7)}` ); }
            return lines;

I am able to obtain The first image where the tooltip are shown outside the chart area (just below the chart) and for each series there is a colored box. This is fine, but I do not really want individual boxes.

I then tries to use the tooltipLegendTemplate instead of tooltipDataTemplate and with this code:

// Add some interaction modifiers to show zooming and panning
new RolloverModifier({
showRolloverLine: true,
showTooltip: false,
tooltipLegendTemplate: getTooltipLegendTemplate,
placementDivId: “tooltip-div-id”,

// Override the standard tooltip displayed by CursorModifier
        const getTooltipLegendTemplate = (seriesInfos, svgAnnotation) => {
            // Lines here are returned to the tooltip and displayed as text-line per tooltip
            let outputSvgString = "";
            let x;
            // Foreach series there will be a seriesInfo supplied by SciChart. This contains info about the series under the house
            seriesInfos.forEach((seriesInfo, index) => {
                let unit
                x = seriesInfo.formattedXValue
                switch(seriesInfo.seriesName) {
                    case "T8": unit = ' °C'; break;
                    case "HU": unit = ' %'; break;
                    case "Aging Factor Small": unit = ' %'; break;
                    case "Aging Factor Large": unit = ' %'; break;
                    case "Space Charge Factor Small": unit = ' %'; break;
                    case "Space Charge Factor Large": unit = ' %'; break;
                    case "mA first 40kV": unit = ' mA'; break;
                    case "mA first 50kV": unit = ' mA'; break;
                    case "mA first 60kV": unit = ' mA'; break;
                    case "mA first 95kV": unit = ' mA'; break;
                    case "mA first 125kV": unit = ' mA'; break;
                outputSvgString += `<text x="8" y="${20*(index+2)}" font-size="16" font-family="Verdana" fill="${seriesInfo.stroke}">
                                    ${seriesInfo.seriesName}: ${seriesInfo.formattedYValue} ${unit}
            // Content here is returned for the custom legend placed in top-left of the chart
            return `<svg>
                        <text x="8" y="20" font-size="15" font-family="Verdana" fill="lightblue">Exposure ${Math.trunc(x)}</text>

With this code I can obtain the second image. But I would like to place the SVG outside of the chart area (just like I pointed in the image). The placementDivId: “tooltip-div-id” does not seem to work for tooltipLegendTemplate, it only works for tooltipDataTemplate. Can we place the SVG outside of the chart area?

Thank you !

0 votes

I am having an issue while trying to append 3d scatter points to a 3d surface.

The following error is being shown . I tired to looking into the documentation too.
Searched for a solution but didn’t find anything.

0 votes

I have an older version of SciChart, and I get this SystemException when I try to set the runtime license key.

Message=The registry key specified by the RegistryStoragePath property could not be opened.

What am I doing wrong?

Thanks a lot

0 votes
0 answers

I’m having an issue when I try to plot about 40000 points or more on ios, it only renders a straight (randomly diagonal) line (maybe 2 points?).

  • I’m doing the exact same thing in android and it works fine there.
  • If I switch to a scatter plot it works fine too (on ios), so it seems like SCIFastLineRenderableSeries is the culprit.
  • I also noticed an issue where the number of points rendered in the simulator is seemingly limited, but on a physical device its not (I suspect this is unrelated, but might be of interest. It occurs at a much lower point count)
  • I haven’t narrowed down the exact point count where this issue surfaces, but I could if that would help. 40k is just a ballpark.
  • My data series acceptsUnsortedData (but again, works fine in android)
  • SwiftUI and v4.5.4

Ultimately the reason I’m plotting that many points is problematic for several other reasons, so this is about to be a non-issue for me (i.e. I’m just going to plot less points), but it seems like a bug that should be reported.

  • w p asked 2 weeks ago
0 votes

I’m migrating from LiveCharts to SciChart. With LiveCharts, adding a new point to the series is smooth, and you can see the animation playing as the new point is added.

I’m appending points to a FastLineRenderableSeries with FIFO mode. How can I implement the same effect, just like in LiveCharts?

  • Sami Lamb asked 2 weeks ago
  • last active 2 weeks ago
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?

1 vote

As the topic asks: is this able to run in linux? or has anybody gotten this to run under Linux or android?

  • rippie asked 12 years ago
  • last active 2 weeks ago
0 votes
0 answers

Hello, I am developing a financial chart in my android application and I am creating a Trendline. I want the trendLine name to be written on each created trendLine, but I could not find how to do it. I create LineAnnotation lineAnnotation = new LineAnnotation(getContext()); but the withAnnotationLabel property is not accessed from here. how can I do this? and can I make this name not always appear, but only when the trendline is clicked?

0 votes


I have prepared a test solution for the issues major and minot tick issue and for the issue of double axis titles. Please check the pdf, that I have attached and try testing my solution with versions v7.x and v8.x.
You should see the issues described in the report.

Kind regards,

0 votes
0 answers

I have a chart with VerticalLineAnnotation in VerticalSliceModifier,
new VerticalLineAnnotation()
XAxisId = XAxis.Id,
YAxisId =YAxis.Id,
LabelPlacement = LabelPlacement.BottomLeft,
ShowLabel =true,
X1 = 0.3,
CoordinateMode = AnnotationCoordinateMode.RelativeX,
IsEditable = true

Is there a easy way to set label to show axis value, not the Relative?
By the way VerticalLineAnnotation label can auto fit LabelPlacement? When I drag to edge, the label will be sheltered.

  • wei zhao asked 2 weeks ago
  • last active 2 weeks ago
0 votes

I know it is possible to create a dashed line annotation by using the StrokeDashArray property of a VerticalLineAnnotation or HorizontalLineAnnotation.

Is it possible to create a BoxAnnotation with a dashed border?

1 vote


I switched from NumericAxis to DateTimeNumericAxis to view x axis labels in hh:mm format. It is definitely showing the labels in this format which is what I wanted, but for some reason it always show “Jan 1” in the first label. I simply want to show hh:mm labels based on the X values. One thing to now is that this is a live updating chart, not static data.

What am I missing? attached is a picture showing the issue and a picture with the DateTimeNumericAxis configuration.


0 votes

Hi, I am currently doing MVVM development with SciChart. Previously I was using thousands of LineRenderableSeriesViewModel to represent vertical lines along a profile. I noticed that this may be the cause for a slow-down, so I have attempted to merge all the LineRenderableSeriesViewModels into one view model, using double.NaN’s in between vertical lines to get gaps. This works fine, except if the first point is off-screen then everything else disappears. I am currently using the VisualXcceleratorEngine in my surface. The screenshots show what happens if I pan to the right a little bit and the first point goes off-screen. One thing I thought it was at first was the stationing was not monotonically increasing, but I have made it that way and it didn’t fix the problem. Tips would be appreciated.

0 votes


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


I have some strange beaviour when using horisontaly stacked charts and cursors. When adding showYLine for the cursor it shows and both charts Y axis. How can I limit/add workaround so it only shows on the correct axis? See the screenshot.

Thank you.

0 votes

In the “Central XAxis and YAxis” example, I saw how I could use IsCenterAxis to have the X-axis and Y-axis centers intersect vertically and appear in the center of the view, but the version I was using did not have the IsCenterAxis attribute.

  • Du Yeming asked 3 weeks ago
  • last active 3 weeks ago
1 vote

While working with ISCIAnnotation, I encountered such a problem.

After changing the timeframe, I update the positions of the annotations added to the chart relative to the X axis.
To do this, I call the x-axis label provider.

let labelProvider = xAxis.labelProvider as? ISCICategoryLabelProvider

Then I call a method that should transform the Date into the correct index for the current timeframe.let pointAbsoluteX = labelProvider.transformDataToIndex(I give the x-axis coordinate(Date()) for the annotation as a parameter)

Give to transformDataToIndex() 2022-08-12 05:00:00 +0000
and get -1.0
Give to transformDataToIndex() 2022-08-16 07:00:00 +0000
and get -1.0

Tried changing searchMode values: (.exact, .nearest, .roundUp, .roundDown).
Regardless of the selected value, the function still returns -1.0.

But after receiving the first tick for the current quote, the labelProvider.transformDataToIndex function starts returning the correct values.

Give to transformDataToIndex() 2022-08-12 05:00:00 +0000
and get 205.0
Give to transformDataToIndex() 2022-08-16 07:00:00 +0000
and get 207.0

Accordingly, my annotations are displayed incorrectly on the chart until a tick is received for the current quote.

Please tell me how to solve this problem.

0 votes

I had recently integrated SciChart into my app, and faced some problems with chat appearance on trial mode which are described here:
Due to this problems I tried to run my app on an actual device, and got this build error from Xcode:

ld: building for iOS, but linking in dylib file (/Users/ruslansabirov/Library/Developer/Xcode/DerivedData/exinity-aupulhpegzsnlfcrnqfiwnvnljpj/Build/Products/Debug-iphoneos/SciChart.framework/SciChart) built for iOS Simulator, file ‘/Users/ruslansabirov/Library/Developer/Xcode/DerivedData/exinity-aupulhpegzsnlfcrnqfiwnvnljpj/Build/Products/Debug-iphoneos/SciChart.framework/SciChart’ for architecture arm64
clang: error: linker command failed with exit code 1 (use -v to see invocation)
How can I fix this problem?

0 votes

Hi, I’ve found that there is no example of using SciChart in SwiftUI, the swift examples are using storyboard.

I’ve tried that, using SciChart in SwiftUI, and it worked. But I have some confusions about axis update and data update.

in SwiftUI, first I create a chartview struct as NSViewRepresentable, and in func makeNSView(context: Context) -> SCIChartSurface{} to initialize the chartview as any supported SciChart view type.

second, in func updateNSView(_ nsView: SCIChartSurface, context: Context){} to update the data and axis.

When updating axis(like visiablerange), every time I need call nsView.xAxes.clear() to remove axis first and then add axis again.

When updating data, every time I need to call nsView.renderableSeries.clear() to clear current plot data first and then call nsView.renderableSeries.add() to update the data.

My confusion is that is this the right way to do that? It seems not quite efficient.

  • Keyu Yan asked 2 years ago
  • last active 3 weeks ago
0 votes

Good day guys. I have download SciChart_iOS_SDK_4.2.0.5533 on Macbook M1. And try to integrate ios-arm64_armv7 verions to my project. I have added SciChart.xcframework to frameworks in Xcode 12.4. But the build is failed with a few errors:

  1. unable to load standard library for target arm-64-apple-ios9.0
  2. Failed to build module ‘SciChart’ from its module interface, it may have been damaged or it may have triggered a bug in Swift compiler when it was produced.

Can you tell me please did I use the right version of SciChart.xcframework for apple silicone? And how to solve this errors?

0 votes


body { margin: 0; }

scichart-root { width: 100%; height: 100vh; }


// Create a SciChartSurface in the div ‘scichart-root’

async function builderExample(divElementId) {

var data1 = [[1698350200000, 659.4081], [1698350200000, 709.4191], [1698347047000, 542.9722], [1698342726000, 652.2053], [1698338406000, 566.1798], [1698334075000, 616.6355], [1698329754000, 686.94464], [1698325434000, 581.1947], [1698321108000, 616.5695], [1698316788000, 687.024], [1698312467000, 514.56464], [1698308146000, 657.59796]];

var xArray = [];
data1.forEach(function (value,index) {
// xArray[index] = value[0]
xArray.push(new Date(value[0]));
var yArray = [];
data1.forEach(function (value,index) {

// Demonstrates how to create a line chart with SciChart.js using the Builder API
const {
ECoordinateMode ,
EHorizontalAnchorPoint ,
EVerticalAnchorPoint ,
} = SciChart;

// or, for npm, import { chartBuilder, … } from “scichart”

// #region ExampleB
// If you want to show an XAxis with dates between 1st March 2023 and 10th March 2023
const minDate = new Date(xArray[xArray.length – 1]);
const maxDate = new Date(xArray[0]);
console.log(xArray[0] + “minDate “+ minDate);

console.log(xArray[0] + “maxDate “+ maxDate);
// Create data for the chart with X-data as dates using unix Timestamp / 1000

const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(divElementId, {
surface: { theme: { type: EThemeProviderType.Dark } },
xAxes: {
type: EAxisType.DateTimeNumericAxis,
options: {
axisTitle: “X Axis / DateTime”,
// We need to specify some visibleRange to see these two dates
// SciChart.js expects linux timestamp / 1000

visibleRange: new NumberRange(minDate.getTime()/1000, maxDate.getTime()/1000 )
yAxes: {
type: EAxisType.NumericAxis,
options: {
axisTitle: “Y Axis, Left, default formatting”,
axisAlignment: EAxisAlignment.Left,

visibleRange: new NumberRange(500, 800),
series: [
type: ESeriesType.MountainSeries,
options: {
strokeThickness: 3,
stroke: “#50C7E0”
xyData: { xArray, yArray }
// #endregion
sciChartSurface.chartModifiers.add(new ZoomPanModifier(), new MouseWheelZoomModifier());

// Add annotations to tell the user what to do
sciChartSurface.annotations.add(new TextAnnotation({
text: “DateTimeNumericAxis Demo”,
x1: 0.1, y1: 0.1,
yCoordShift: 0,
xCoordinateMode: ECoordinateMode.Relative, yCoordinateMode: ECoordinateMode.Relative,
horizontalAnchorPoint: EHorizontalAnchorPoint.Center, verticalAnchorPoint: EVerticalAnchorPoint.Center,
opacity: 0.33,
fontSize: 36,
fontWeight: “Bold”
sciChartSurface.annotations.add(new TextAnnotation({
text: “Try mouse-wheel, left/right mouse drag and notice the dynamic X-Axis Labels”,
x1: 0.5, y1: 0.5,
yCoordShift: 50,
xCoordinateMode: ECoordinateMode.Relative, yCoordinateMode: ECoordinateMode.Relative,
horizontalAnchorPoint: EHorizontalAnchorPoint.Center, verticalAnchorPoint: EVerticalAnchorPoint.Center,
opacity: 0.45,
fontSize: 17,

const lineSeries = new FastLineRenderableSeries(wasmContext);
lineSeries.strokeThickness = 3;
lineSeries.stroke = “rgba(255,0,0,1)”;
lineSeries.dataSeries = xyDataSeries;

// Uncomment this to use the builder example

0 votes
0 answers


I want to display statistical data using a violin plot. Is it possible to create a violin plot using SciChart?
A violin plot is similar to a box plot, with the addition of a rotated kernel density plot on each side.


1 vote


I want my HeatmapColorMap to be part of my chart, so that when I export it, the HeatmapColorMap is visible on the PNG / XPS.
In order to this, I put the HeatmapColorMap inside a CustomAnnotation.
I can see it nicely on my Surface but when I try to export it as XPS or as PNG with some specific size, the numbers and ticks have disappeared, only leaving the rectangle with color gradient (see attached picture)
Is there a way to solve this ?

Thank you !

0 votes

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

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

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 1 month ago
  • last active 4 weeks ago
0 votes


I created multiple charts by using subchart api. I would like to know how to listen click() event for each subchart. In other words, how do I know which subchart is clicked by the user?


  • Atanai W. asked 4 weeks ago
  • last active 4 weeks ago
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


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


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).

4 votes

I will continue to this question here, but with more details. So I need to be able to drag axis annotations separately. Is there any possible way to achieve this in iOS? Basically I subclassed SCIAxisMarkerAnnotation and implemented my own -onPanGesture:At: but it does not separate instances of the class when I try to drag one of the annoation. All moves to same place. How can I detect which annotation is being dragged?


#import <SciChart/SciChart.h>
@class CDAxisMarkerAnnotation;

@protocol CDAxisMarkerAnnotationDelegate <NSObject>

- (void)axisMarkerAnnotation:(CDAxisMarkerAnnotation *)axisMarkerAnnotation


@interface CDAxisMarkerAnnotation : SCIAxisMarkerAnnotation

@property (weak, nonatomic) id<CDAxisMarkerAnnotationDelegate> delegate;



#import "CDAxisMarkerAnnotation.h"

@implementation CDAxisMarkerAnnotation

- (BOOL)onPanGesture:(UIPanGestureRecognizer *)gesture At:(UIView *)view
    if (![view isKindOfClass:[SCIChartSurfaceView class]]) {
        return [super onPanGesture:gesture At:view];

    switch (gesture.state) {
        case UIGestureRecognizerStateBegan:
        case UIGestureRecognizerStateChanged:
        case UIGestureRecognizerStateEnded: {
            CGPoint location = [gesture locationInView:view];
            id<SCIRenderSurface> renderSurface = [self.parentSurface renderSurface];
            CGPoint pointInChart = [renderSurface pointInChartFrame:location];
            id<SCICoordinateCalculator> yCalculator = [self.yAxis getCurrentCoordinateCalculator];
            double valueForYAxis = [yCalculator getDataValueFrom:pointInChart.y];
            [self.delegate axisMarkerAnnotation:self didPanToAxisValue:valueForYAxis];
        default: {
    return YES;



Showing 1 - 50 of 4k results