Forums

I’m new to SciChart and have been following the tutorial provided by SciChart (SciChart WPF 2D Charts > Tutorials > MVVM). Took me hours to make it through the first step in Tutorial 02b – Creating a SciChartSurface with MVVM due to namespace typo in the tutorial, and again I’m now stuck at the very second step.

I cannot replicate the result in Tutorial 03b – Adding Series to a Chart with MVVM. No error found in the output, no binding error whatsoever, but the line is not visible. Also see the attached image comparing what it should look like in the tutorial and what mine looks like.

The project is a direct copy and paste from the tutorial except for the names. I have also cross checked against the code in GitHub. I’ve attached the project as a zip with the bin and obj folders removed.

I found two other related questions on this forum one being 11 years ago and the other dated 8 years but my recent trial installation encountered the exact same error and I have no way to start testing the charting library in my code.

I followed this tutorial:
https://www.scichart.com/documentation/win/current/webframe.html#Tutorial%2002b%20-%20Creating%20a%20SciChartSurface%20with%20MVVM.html

And I get this this error:
The tag ‘SciChartSurface’ does not exist in XML namespace ‘http://schemas.abtsoftware.co.uk/scichart’

I tried installing through the MSI & Licensing Wizard and I also reinstall the package through NuGet package manager console, and restarting Visual Studio but problem remains.

The SciChart WPF library version: 8.2.0.27935
Visual Studio: Microsoft Visual Studio Community 2022 (64-bit) configured to be x86. Target framework 4.8.

This is very disappointing

I want to configure the chart as shown in the image.
How should I code to implement the same image in SciChart?

https://stackoverflow.com/questions/77752586/reactjs-sweep-line-demo-issue-with-multiple-surfaces-not-updating-simultaneousl

I need to make a demo of a sweep line with multiple surfaces with reactjs, but The problem is that when I choose to show more than 1 surface it only plays on the data on the latest created surface and stops drawing data on the old surfaces.

you can see the example here with the code: https://28zf6p.csb.app/

this is a GIF for the problem:
[in the stack overflow link]

note: the reason I need multiple surfaces is that I want to have the charts draggable with sortableJS to follow the design I got.

How to remove logo of SCI Chart in android.

Hello.
I’m just started to use SciChart and I have a question. How I can mirror XAxis in order to values will be increased from right to left. It is not negative scale but this view is more familiar for users (now I remake the old application). P.S. And be the best if additionally you show me how to make static XAxis with chosen range. I see the example in demo’s “Create Realtime Charts” section (my chart will be real-time too), but my application created via MVVM and I think this example not fully applicable to my case (but I fink after some investigation I will can remake example, but if you help me it be easier).

Axis in ChartControl sets the interval.
XAxis

hello.
I added an OverView and scrollbar below the main chart, referring to the CustomOverviewView example.
Graph and scroll functions work without problems.
I want to show the main chart annotations in the OverView.
How can I solve my problem?
have a good day!

Dear Andrew,

As mentioned in the previous question. we are getting ready to implement a comprehensive annotation and labeling functionality to our application. Although I know how to add scalable custom-annotations (your team guided us with the implementation in the past), an important part of of annotation functionality is. ability to edit the annotations. But I am having trouble accessing and interacting the the annotations.

How can I access the svg polygon nodes from the custom annotation and drag and move them? I have attched a video to show the existing functionality.

https://youtu.be/AkysJ2R3TyE1

Best,
Pramod

Hi, we are using CategoryAxis to display stock data, however, as you can see in the image below, within the “same” candle or volume, divergent information is displayed.

am I doing something wrong?

I am considering applying server-side licensing for my javerScript application.

In the document below, there is a phrase “Our server-side licensing component is written in C++.”
(https://support.scichart.com/index.php?/Knowledgebase/Article/View/17256/42/)

However, there is only asp.net sample code on the provided github.
(https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-dotnet-server-licensing)

I wonder if there is a sample code implemented in C++ for server-side licensing.

Can you provide c++ sample code?
Also, are there any examples to run on Ubuntu?

I need help to make the SciChart surface grid to always look like squares instead of rectangles(like in the screenshot attached).
Does anyone have solved this yet ?

Hi,

Gauges (linear and radial) are not part of scicharts components…
These controls are helpfull to do some dashboards

Is scichart can do that?
Examples exists?

circular samples
like https://apexcharts.com/javascript-chart-demos/radialbar-charts/
like https://nivo.rocks/radial-bar/
like https://antoniolago.github.io/react-gauge-component/
like https://codepen.io/naikus/pen/BzZoLL

linear samples
https://docs.anychart.com/Gauges/Linear_Gauge

Regards.

This question is related to this.

I still see a problem with memory accumulation and I just can’t cope with it. For clarity, I created a simple example with the simplest graph, two axes, one line series and 10,000 values in this graph.

When the page loads, no code is executed and there is only a button that creates one graph, adds it, waits 3 seconds and deletes it.

I use this button to test the speed and the fact of memory accumulation. For the simplest test, it is enough to simply create a certain number of times and wait for the graph to be deleted. After which it is clear that after some time the memory will not return to its previous values.
Example: after loading the page, memory consumption was about 30-40 MB, after creating and deleting 15 graphs (one by one), the memory was already 105 MB

Thus, with each graph, memory leaks.

Also, to test and search for memory leaks, I used the three snapshot technique:
1) created, for example, 2-3 graphics one by one
2) took a snapshot
3) created an even number of charts (for example, 10 or 25)
4) took a snapshot
5) created one or two more graphs
6) took a snapshot

7) I opened the 3rd Snapshot and looked at the result of the objects distributed between Snapshots 1 and 2. Every time I see the same exact values of 10 or 25 or multiples of them.

Can you please look at the code, at creation and deletion, repeat this test to understand where this memory is leaking from.

Thanks in advance for your answer. I hope the problem will be found.

Zip file upload has been forbidden.
Link to GoogleDrive: https://drive.google.com/file/d/177QFurYZwnnd5Hp9a9jQV2z4nt6ULhkX/view?usp=sharing

Hi,
I am writing to request some helps about VisibleRange.

I am drawing simple line graphs using NumericAxis and XyDataSeries<long,double>.
I should control axis range so I used XVisibieRange with Int64Range.
But I have an error that It cannot be applied.

How can I control VisibleRange with long type data??

I am new to scichart javascript library and trying to run the provided examples locally. I was working on this example
https://www.scichart.com/documentation/js/current/The%20Candlestick%20Series%20type.html

I am able to run this example locally. now I want to add cursor snapping in it. An example would be tradingview candlestick charts. in those charts cursor snaps to nearest candles.
I am trying to achieve similar. I looked into the docs but couldn’t find the answer.

Thanks !

Hi,

i have a SciChartSurface with DateTimeAxis as xAxis and a NumericAxis as yAxis.
The fifo capacity is 500 points.

Now what i want to archieve is that when i zoom in that the visible range updates in a matter that its moving with the fifo and not to be frozen and at some point in time see how the data points are discarded.
I already implemented a CustomRubberBandZoomModifier which disables autoranging on Zoom and enables it after Zoom to Extents.

How could i archieve this like shown in the attached image?

Thank you already in advance.

I am considering applying server-side licensing for my javerScript application.

In the document below, there is a phrase “Our server-side licensing component is written in C++.”
(https://support.scichart.com/index.php?/Knowledgebase/Article/View/17256/42/)

However, there is only asp.net sample code on the provided github.
(https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-dotnet-server-licensing)

I wonder if there is a sample code implemented in C++ for server-side licensing.

Can you provide c++ sample code?
Also, are there any examples to run on Ubuntu?

TextAnnotation,Let me use this method, I want to make all the text in the text attribute display vertically, and find that there is no such function, NativeTextAnnotation has this function but does not support Chinese.I hope you can see that you can give a reply, thank you![enter image description here][1]

Hello,

Normally, if I have a ScichartSurface with a X- and Y-Axis, were both axis AutoRange- properties are set to Always, the surface displays the entire data by adjusting the Visible ranges of the axis after new data has been appended.

This also works if there are multiple Data-Series on the ScichartSurface.

In my case, I have two FastLineRenderableSeries on my Surface. Each of them receiving new data via the Append-function while the x- and y-axis are continuously adjusted automatically to display all the datapoints of both Datasets.

So far so good…

But what would I have to do if I wanted one of the two Datasets to be ignored by the Autorange properties of the x- and y-Axis?

I have already tried to set the X- and YAxisID of one dataset to null, hoping I could make both axis ignore this Dataset while they are adjusting their Visible ranges. However, this only led to error messages.

I could also try to write my own ViewPortManagers and overwrite the OnCalculateNewXRange and OnCalculateNewYRange funvtions, but that seems a little bit excessive.

Is there an easy way to achieve the desired behavior?

Thanks.

I have two SciChartSurfaces

One is a HeatMap (x:Name=”MainChartSurface”), the other a line graph.
I have set it up so that when a vertical cursor is moved the smaller line graph shows a ‘cross-section’ of the heatmap.

The attached image shows the right hand end of the heatmap and the smaller line graph.

The X-axis of the line graph is set to Alignment=Right and this axis has the same range as the y-axis of the heat map – set in xml as:

 MajorDelta="{Binding Source={x:Reference Name=MainChartSurface}, Path=YAxis.MajorDelta, Mode=TwoWay}"
 MinorDelta="{Binding Source={x:Reference Name=MainChartSurface}, Path=YAxis.MinorDelta, Mode=TwoWay}"
 AutoTicks="False"
 VisibleRange="{Binding Source={x:Reference Name=MainChartSurface}, Path=YAxis.VisibleRange, Mode=TwoWay}"

this all works, so if the main graph is zoomed, the 2D line graph Y-axis follows the main graph.

The Y-axis of the line graph has Alignment=Bottom, and it shows the z-values for all y-values at the location vertical cursor (a RolloverModifier) on the main graph.

The problem I have is that the space taken by the axis at the bottom of the charts is different, so the chart areas are different. Look carefully at the attached image and see the bottom axes do not align.

How can I link the space taken to force the bottom axes to stay in alignment?

Thanks
Andrew Milford

How to display data labels vertically and support Chinese，As shown in Fig

Hi.
My colleagues have used on their WPF application SciChartScrollbar to select a portion of a created graph. I want to use the same behavior on Xamarin.Android. What can I use to have the same effect?
Thank you.

Hi ,

I’m encountering a critical problem with the SciChart library. The issue seems related to the loading of native methods, specifically Java_com_scichart_charting_numerics_coordinateCalculators_FlippedDoubleCoordinateCalculator_nativeGetCoordinates.

Development Environment:
SciChart Version: 4.4.0-nightly.4744
Library Type: Android
Android Version: Android 13
Release Method: Play Store Download
Debug/Release Modes: Not Reproducible in Direct Android Studio Build

I’ve reviewed the code and documentation but couldn’t pinpoint the issue. I need help with:
1. Confirming the correct loading of the SciChart library.
2. Suggestions for troubleshooting to identify why the native method invocation is failing.
3. Any updates or configurations needed for proper SciChart library integration.

Thanks

Raja Debbarmann

Is there any option to hide the axis title of NumericAxis3D in ZxAxisPlane. Want to hide the title highlighted in the attached image.

Good day,

we are using the VerticalSliceModifier for sorted data and it works very good.

<local:VerticalSliceModifierExt x:Name="SliceModifier">
<s:VerticalSliceModifier.VerticalLines>
    <chartModifier:SnappyVerticalLine x:Name="VerticalLine"
                          ShowLabel="False"
                          X1="0"
                          Y1="0"
                          CoordinateMode="Absolute"
                          IsEditable="True">
    </chartModifier:SnappyVerticalLine>
</s:VerticalSliceModifier.VerticalLines>

Please see the image “Example Vertical Slice Modifier”.

The challange is to have something similar for unsorted data.

One of the issues are multiple intersections. Please see the image “Multiple Intersections” where i would like be able to select what intersections shall be highlighted.

The next challange is the usage of multiple series and synchronization based on a different property (t for time). Please see “Multiple Series” image.

We already have IPointMetadata with X,Y and t to be able to find the data point to highlight.

My question: Is there already some modifier chat can help with this requirements or what would be a clean solution if we need to develop a custom modifier.

Thank you in advance
Paul

Hello, how do I remove the shadow from tooltips, generated by the VerticalSliceModifier?

Thanks!

Good evening. Lately I’ve been troubleshooting a problem with page memory usage increasing. Over time, the memory grows exponentially and reaches several gigabytes. To explain the problem, we need to describe how we use charts:

On our website in real time, depending on our algorithm, the charts replace each other. The user constantly sees 4 charts, which are constantly replaced by others. Adding new charts occurs unnoticed by the user and only after the graph is fully loaded and drawn does it replace the previous one. That is, the user actually sees 4 charts, but there may be more on the page. After replacing the desired chart, the old one is deleted using surface.delete() and removing all dependencies.

At first, when creating a chart, I used the create() method. After a number of attempts to avoid memory accumulation and re-reading the documentation, I came to the conclusion that it is possible, since all graphs are created using create() – they have a common wasm and since there cannot be a situation in which all charts will be deleted (at least 4 are always present ), then wasm memory is not freed. Tell me if I’m right about this.

Afterwards, I decided to try to create charts using createSingle() with a reliable method, which now, since each graph has its own wasm, memory will be freed. Perhaps this was the case, but I can’t say for sure, because now after some time the page began to reload automatically with the appearance of an error, the screenshot of which I attached. This is most likely due to a wasm limitation on the page when using createSingle. Although it’s strange, when you delete the chart, the amount of wasm should decrease. And even with a limit of 16 copies, this should be enough. Please explain this error to me as well, perhaps the problem with rebooting can be somehow solved by you (I’m not sure that this should happen)

Thank you very much in advance for your answer. Have a good day!

This demo was very helpful in working export out. I have a followup question. For a specific user request, I’m currently attempting something along these lines (current state; there’s some spaghetti-against-the-wall method going on at the moment):

const previousTheme = surface.themeProvider;

    const exportTheme = {
        ...previousTheme,
        sciChartBackground:"Transparent",
        gridBackgroundBrush:"Transparent",
        axisBandsFill: "Transparent"
    }

    surface.applyTheme(exportTheme);
    surface.background = "Transparent";

    new Promise(r => setTimeout(r, 1000)).then(() => {
        try {
            const node = document.getElementById('scichart-stuff');
            if (!node)
                return;
            domtoimage
                .toPng(node )
                .then(function (blob) {
                    saveAs(blob, 'plot.png');
                })
                .catch(function (error) {
                    console.error('Problem exporting/saving image of plot', error);
                });
        } finally {
            surface.applyTheme(previousTheme);
        }
    })

I am able to see the update (after adding the delay) on the screen, but the export appears to be ignoring the values I’m setting. I’m wondering what I might be missing in terms of the interactions of these libraries.

Am trying to get the same look and feel of the cursor modifier on both the charts.

• am not able to get the tool tip to show on the other side.
• am not able to get the get horizontal lines.

I’m a C# developer looking to evaluate working with SciChartJS for a possible future project.

I’ve created a .NET Blazor Project working with JavaScript Interop and I would like to extend the CustomChartModifier2D in TypeScript.

I’ve not used npm to install SciChart into the project, rather I’m using the CDN approach in my _Host.cshtml file.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js" crossorigin="anonymous"></script>

I’ve been searching online for a SciChartJS TypeScript definition file so that I can leverage TS Strongly Typed system in my test project.

Is there one? Or do I need to build my own, or even is there an already made example of extending SciChart with TypeScript somewhere I’ve missed?

Thank you

Hi –

I could not find an example in the various examples your provide

I have several charts in different components

When a component is closed I want to ensure the chart is destroyed and there is not potential for memory leak

What is this best way of doing this?

Thanks