Forums

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

Hello,

I found an issue with very high memory usage by the application. after some tests I found the problem and moved it to a separate example(https://codepen.io/PodaRocheK/pen/PoVmzvP?editors=0011). Please check this code and observe the memory usage on this page. With prolonged use (after 10 minutes), it is clear that more and more memory is used. After hours, the memory used may already be more than several gigabytes. Tell me what the problem is, maybe I’m doing something wrong. Maybe I’m somehow storing old data incorrectly or adding it incorrectly.

This example is not a working example, it has been sped up in order to quickly identify the problem. In our example, an unnecessary data update will occur once every few seconds and after a night of inactivity, the entire page will die. Please tell me what the problem is.

Thank you!

Hi Folks,

Wanted to ensure I’m working in the right direction here. Requirement is to add inline series labels on the plot surface. It’s an awkward requirement at times, but it keeps coming up with because other providers do this sometimes.

I’ve been playing with the examples of using data labels ( https://github.com/ABTSoftware/SciChart.JS.Examples/blob/master/Examples/src/components/Examples/Charts2D/TooltipsAndHittest/UsingVerticalSliceModifier/index.tsx ).

This might work. It’s a little strange since I only need to show at most one label per series. So I use the data label provider I assume and have to manually space them along the index range.

The only alternative I’m aware of is the annotations api, which of course is quite robust and probably a little too fancy for this case.

Appreciate any thoughts on the approach here — thanks!

EDIT: Attached very contrived example. The idea is to supply a label to name the series inline (apparently a legend is not sufficient), but in a way that is reasonably useful visually (similar to the spacing capabilities in the data labels api). The text would be some piece of metadata that is derived from the series (or at least has a 1:1 relationship with the series).

Hello,

i’m trying to build a chart using a Stripe Data series, on the X axis i have a DatetimeAxis while on Y axis i have a Numeric.

I have an observable collection of IRenderableSeriesViewModel, and when i try to add a StripeRenderableSeriesViewModel if the dataseries contains many elements (>2000) it logs this exception below:

Exception thrown: ‘System.InvalidCastException’ in System.Private.CoreLib.dll
SciChartSurface didn’t render, because an exception was thrown:
Message: Invalid cast from ‘Double’ to ‘DateTime’.
Stack Trace: at System.Double.System.IConvertible.ToDateTime(IFormatProvider provider)
at System.Convert.ChangeType(Object value, Type conversionType, IFormatProvider provider)
at SciChart.Charting.Model.DataSeries.StripeDataSeries2.rwx(ResamplingParams gib, StripePointSeries gic)
at SciChart.Charting.Model.DataSeries.StripeDataSeries2.ToPointSeries(ResamplingParams resamplingParams, ResamplingMode resamplingMode, IPointResamplerFactory factory, IPointSeries lastPointSeries)
at dih.lay(AxisCollection gg, IRenderableSeries gh, RenderPassInfo gi, IPointResamplerFactory gj, Boolean gk, IDataSeries& gl, IndexRange& gm, IPointSeries& gn, Int32& go)
at dih.lax(ISciChartSurface gd, Size ge, Boolean gf)
at dih.RenderLoop(IRenderContext2D renderContext)
at SciChart.Charting.Visuals.SciChartSurface.DoDrawingLoop()
Exception thrown: ‘System.Threading.SynchronizationLockException’ in SciChart.Drawing.dll
SciChartSurface didn’t render, because an exception was thrown:
Message: Object synchronization method was called from an unsynchronized block of code.
Stack Trace: at System.Threading.Monitor.Exit(Object obj)
at irv.hds(jbq r, SCRTRenderContext s)
at jbv.Dispose()
at SciChart.Charting.Visuals.SciChartSurface.DoDrawingLoop()

Binding and data i’m pretty sure are ok since with fewer data it works fine

EDIT: i was able to reproduce the issue in the wpf sample project (repo), just replace GanttChartViewModel.cs with the sample one i have attached here and it can be reproduced by navigating to the Gantt chart example

When I’m using a BoxAnnotation, and it is selected, I can see that the borders are shown expanding past the chart area, on top of the axes.
Ideally they would have the same behaviour as the normal stroke, and keep constrained to the chart area.

Codepen showing the issue: https://codepen.io/jrfv/full/bGzqvoE

Am I missing some configuration to make this work?

Thanks!

Hi,

I am facing another issue with dataLabels in latest version of Scichart. I saw another question with similar is already posted and the fix is released.

Can you check this code.

I tried to reproduce the issue with the vue js example code, codesandbox. But the issues is behaving differently in example code, codesandbox, and my existing project.

codesandbox: https://codesandbox.io/s/scichart-error-6xc6jw?file=/src/index.ts
codesandbox:- Text in the bottom area are displayed and top area no labes are displayed.

I am attaching the vue js file also. Please check the file also, On the example no labels are displayed.

I am attaching the video of my project also, Here the labels are invisible sometimes, sometimes the labels are showing not properly. Video Link: https://drive.google.com/file/d/1vZ0lO5xdmN9VfFGXMaoTPfTgqRytrEAl/view?usp=sharing

I am using SciChartSurface.create() to create chart and it works well. However, I got the webGL memory issue randomly – WebGL memory issue. I am trying to apply a workaround to use SciChartSurface.createSinge() instead. The createSingle() function doesn’t work for me, the chart cannot be rendered.

const { sciChartSurface, wasmContext } = await SciChartSurface.createSinlge(`${chartId}-chart-root`, { theme: themeObj });

There is no error showing in the developer tool console. I have no idea what’s wrong.

Hello everyone,

I have 2 HorizontalLineAnnotations on the chart as price indicators. Sometimes i need to add to some label more data on the second line of the text. You can see example of correct annotation’s label. How can i add ‘\n’ or ‘
‘ to the text for such result?

Thank you a lot!

Hello everyone. A similar question has already been asked just below the forum, but there is no answer. I have dynamically added diagrams. However, I am interested in the possibility of adding buttons for closing and collapsing diagrams directly to the chart panel. I need the option to close any selected chart. How can this be implemented and written? Thank you.

Dear SciChart team,

I’ve been using SciChart WPF 2D professional for many years now, but this week I’m having a strange problem on one of my colleague’s new laptop (Lenovo X13). The charts seem frozen.

To check if it’s a problem with my application or something else, I installed SciChart on the laptop and launched the SciChart WPF v7 example (.net framework). Then I found all the charts do not render properly.

I have searched the questions on the forum, and I found this https://www.scichart.com/questions/wpf/zoom-not-working-properly-on-one-single-computer, it seems there was someone had the same issue, but it was posted 10 years ago, so I am not sure does the intel graphics hardware still has this problem now days.

I am asking my colleague to upgrade the graphic adapter’s driver, but if you have any other idea to fix this issue, please also let me know.

Best Regards
Chris

Can I implement a feature in SciChart that allows me to pause and resume rendering activity on a SciChart renderable surface when a user clicks on the SciChart renderable surface?