Pre loader

Category: JavaScript

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

1 vote
2k views

I remember asking about something similar many years ago with WPF, but in browser the problem seems more apparent.

Using the current data model (I can be fairly flexible on the backend, and don’t necessarily have to do things this way), for some of the plots I generate many series that do some funky overlapping stuff (example attached). In the extreme examples, this can be thousands of series (the total number of data points might be < 100k).

In these cases, drawing basically grinds to a halt. Zooms take seconds, the OS starts complaining that chrome is locked up — you get the idea.

Is there a better way to approach this sort of plot? Are there any tuning recommendations for this scenario?

1 vote
2k views

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

  • David P asked 5 months ago
  • last active 4 months ago
1 vote
2k views

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

1 vote
1k views

As part of a recent flag added to 3.2.509, I moved from 3.2 to 3.2.509; it looks like positioning of the scichart legend has changed. The style is now appearing as position: absolute — I don’t have access to source, but I wonder if this was part of 3.2.491, which mentioned something about positioning of the legend?

Anyway, if this was an intended change — and if it’s not something I managed to do to myself — it broke my implementation of an outside-of-plot legend. This is how the style is currently appearing:

<div class="scichart__legend" style="height: 100%; position: absolute; display: flex; left: 0; top: 0; text-align: center;">
...
</div>

This is how it appeared my currently deployed code:

<div class="scichart__legend" style="height: 100%; display: flex; float: left; text-align: center;">
...
</div>

Anyway, should be able to figure something out I hope — I’m no CSS wizard — but wanted to flag it as a possible breaking change that might not have been intended.

1 vote
1k views

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!

1 vote
2k views

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

1 vote
1k views

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!

1 vote
1k views

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

1 vote
2k views

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.

  • Quyen Sy asked 5 months ago
  • last active 5 months ago
1 vote
1k views

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!

1 vote
1k views

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.

1 vote
1k views

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?

  • Vishnu K U asked 5 months ago
  • last active 5 months ago
0 votes
2k views

Good afternoon. Scichart WPF has two built-in small buttons in the top right corner of the panels for collapsing and closing charts. How can you add such buttons in Scichart javascript and how to correctly describe the functions?

1 vote
6k views

I’m looking on https://demo.scichart.com/javascript-multi-pane-stock-charts-sync-technique
I have a q react application. Can I add/remove subcharts(indicator panes) dynamically?

1 vote
1k views

I’m using an example of RealtimeTickingStockCharts

https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Examples/src/components/Examples/Charts2D/CreateStockCharts/RealtimeTickingStockCharts

I’ve added a modifier

new YAxisDragModifier({
            dragMode: EDragMode.Scaling,
        }),

I see icon changed to arrows but scaling does not work. What should I check ?

1 vote
1k views

I want to be able to disable a chart if there is no data on it, and then enable the chart when there is data. The reason why I want to do that is because I have three charts that are sync and I want to disable the other charts that have no data, so that the cursor modifier or the zooming and stuff will not affect the other charts without data and will only affect the one with data.

Attached image is 3 charts that are in sync.

  • Nung Khual asked 6 months ago
  • last active 6 months ago
1 vote
6k views

Hi everyone,

I am using SciChart trial in Angular and I find it so powerful
Thanks for developing this
However, I am having some troubles using it with plotting realtime stock data

From having searched around I found that it is recommended to use CategoryAxis for stock charts to avoid gaps on days without data
However, how do I append/update the data with new data coming in
XYDataSeries.append takes a number for the x-value

In the code below, assume “addNewData” is called every second
How do I properly add the new data with the new DateTime and also format it however i would like

Thanks for your help

  sciChartSurface.xAxes.add(new CategoryAxis(wasmContext));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext,{
    axisAlignment: EAxisAlignment.Left,
  }));

  addNewData(){
    const x = new Number(new Date()).toString()
    if(this.sciChartSurface){
      const series = this.sciChartSurface.renderableSeries.get(0);
      const dataSeries = <XyDataSeries> series.dataSeries;
      const x = dataSeries.count();
      const y = Math.random()
      dataSeries.append(x, y)
      this.sciChartSurface.zoomExtents()
    }
  }
1 vote
5k views

Hello,

Can you show this example(https://codepen.io/PodaRocheK/pen/yLGxGEL?editors=0011) and tell me, why metadata labels are not displayed in some cases? May be you can tell me how to do it correctly? A have similar chart with a lot of datapoints and can’t understand why labels show only in some time(20s or > 1m after start the chart)

Thank you!

1 vote
6k views

Hi, so I need to get the data of an annotation when clicked, I have tried with addEventListener ‘mousedown’ event and it work for most case, but the issue comes when some annotations are overlapping.

codesandbox example: https://codesandbox.io/s/vertically-stacked-axes-forked-smkd8v?file=/src/App.tsx

In the codesandbox example, you will see that M1 and M2 are overlapping, if I were to click on M2, the click event will return both M1 and M2, but I only want M2 to be return since I only click on M2.

I couldn’t make the clicking to work on codesandbox but I’m sure you get the idea. I have tested it on my local and I got that issue.

Please let me know if you got any other question, thank you.

  • Nung Khual asked 6 months ago
  • last active 6 months ago
1 vote
2k views

Error from chart in div instrument_candle_chart_2
RuntimeError: call_indirect to a signature that does not match (evaluating ‘invoker(fn, thisWired, arg0Wired, arg1Wired, arg2Wired, arg3Wired, arg4Wired, arg5Wired, arg6Wired, arg7Wired, arg8Wired)

error here: OhlcSeriesDrawingProvider.prototype.draw:

this.nativeDrawingProvider.DrawPointsVec(nativeContext, xDrawValues, openValues, highValues, lowValues, closeValues, renderPassData.xCoordinateCalculator.nativeCalculator, renderPassData.yCoordinateCalculator.nativeCalculator, this.args);

1 vote
2k views

As if right now, I have create a custom annotation, which is a red circle and the idea is to show some info when hovering on it, like a tooltip.

Right now, when hovering on the red circle, I am adding another custom annotation to show the info and then removing it when not hovering anymore. The issue with this is that it is not very stable, as in if I don’t point my cursor right in the middle of the red circle, it won’t register as hit. I tried putting hitTestRadius to 50 on CursorModifier, but doesn’t seem to make any difference.

I have also try with xyScatterRenderableSeries and EllipsePointMarker, the issue I find with it is that it is interfering with my data series tooltip, as the cursor modifier recognize it as a chart series and try to show on the tooltip, which I don’t want. I only want the red circle to be trigger only when cursor is right on it.

The first image is my code and how I am trying to achieve it at the moment, it does work, but I don’t think it’s very stable, I wish there is a more natural way to do it.

The second image is how my current solution looks like, as you can see, the data series tooltip is overlapping it, which I want to avoid. I can’t think of a way to solve the overlapping issue yet. Other than unstableness and the tooltip overlapping, it work fine.

The third image is how I want it to look like.

  • Nung Khual asked 6 months ago
  • last active 6 months ago
1 vote
1k views

Imagine I have a chart with a RolloverModifier, such that I see the point marker, and also a CursorModifier so I see the axis labels with the exact value I’m hovering.
This chart has the axis title hidden, and also the labels hidden, so I can really only see them trough the CursorModifier axis labels.
Since the axis title and labels are hidden, the axis labels spawn inside the chart, and the point marker from the RolloverModifier may be drawn on top of the labels.

I’d like to properly control drawing order here, so my axis labels get prioritised.
Is there a way to do so?

Codepen example: https://codepen.io/jrfv/full/VwqVBdo

1 vote
0 answers
2k views

If I have a use case, where heatmap data can be sparse in time, and I’m zooming around and panning trough the chart, it is quite possible to end up missing heatmap data, because at certain zoom levels, the heatmap lines just disappear.

Any tips to make this not happen?

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

Make sure to zoom out slowly, and/or pan around, you should see one, or both lines disappearing.

I would post a video, but doesn’t seem to be allowed here, I’ll post 2 images at slightly different zoom levels then

1 vote
2k views

I am using the solution you provided on, https://www.scichart.com/questions/js/is-it-possible-to-create-info-box-that-will-sync-with-the-xaxis-of-the-chart.

The solution work great but there is one issue, the issue is that the text annotation should always be visible.

The issue with this solution is that the text annotation disappear if I zoom in somewhere not the text area.

Also another issue is that, in this example, the first info box x1 is beyond the current range, and so the text annotation is not visible, since the x1 of the text annotation is the same as info box and x1 is not within the current range.

First image show the first red info box x1 is not within current range, therefore not showing text annotation and the second info box working as expected with text annotation.

The second image show what happen once I zoom in on the right side away from the text annotation, then the ‘#21H’ is not visible anymore, which is wrong. Just like in my previous question example, the text annotation should always be visible, other than that, everything work great.

Thank you and let me know if there is any question.

  • Nung Khual asked 6 months ago
  • last active 6 months ago
0 votes
1k views

Hi,

If the FastMountainRenderableSeries isVisible is true when creating a series and after sometimes tries to change the visible property and getting error from rolloverModifier.

Can you please check the example i have created.

1 vote
2k views

Hi,

DataLabels Not Displaying in all cases in flippedCoordinates. Based on values only its showing. I have created a sample application with some dummy data.

  1. First Series is showing the labels properly
  2. If the first value in array changed then it will show the value.
  3. If all values are 0 then also its not showing the label.

Can you check the attached file for the sample code.

When the chart is not flipped then its works fine when i am checking.

1 vote
1k views

Hello,

I need to customize the text for some points on a XyScatterRenderableSeries graph. The problem is that the dataLabelProvider available for XyScatterRenderableSeries is BaseDataLabelProvider, but it doesn’t have a metaDataSelector method and I can’t do it with it. Interestingly, using LineSeriesDataLabelProvider I was able to add text for the points I needed using metadata, but another problem arose. In this case, if there is only one point on the graph, the text will not be drawn.

Here is a small example of how text is drawn for different numbers of points. https://codepen.io/PodaRocheK/pen/jOXYGMJ?editors=0011

Can you advise me on how to display text near points more correctly in the case when I use XyScatterRenderableSeries and often this text should disappear or appear near some points. Thanks a lot!

1 vote
2k views

Hi,

Is it possible to toggle the DataLabels dynamically in the chart? Setting some values to true or false like isVisible property.

1 vote
2k views

Looking into https://www.scichart.com/documentation/js/current/typedoc/classes/scichartverticalgroup.html I see I can add surfaces to the group, but what about removing them?

I’ve constructed a problematic codepen to show a potential issue:
https://codepen.io/jrfv/full/JjwraLK

Any reason for not being able to remove surfaces from the group?

Thanks!

1 vote
2k views

Hi,
the Tooltip from the rolloverModifier shows for the Open-Values the Label “Open”.

I would like to be able to change that. There might be serveral reasons for that. Maybe the shown data are not “openValues” or the word “open” needs to be translated into another language.

I managed to edit the title of a FastCandlestickRenderableSeries by setting a title and get it into the variable like this:

rolloverTitle = newtitle;
renderableSeries0.rolloverModifierProps.tooltipTitle = rolloverTitle;

unfortunately i did not find a way to set the name/label for the open-,low-,close-, or high-values of this Series.

Can someone give ma a hint how to do this?

1 vote
2k views

Hi,

EDataLabelSkipMode Customization is possible with some time range limit?
When i checked the documentation saw the options to skip the label for overlaping. Is it possible can add some index to skip the values. Eg: for Time chart One value is displayed in the chart at 10:30:00. So if i add some index value to skip the next 1 min data. So based on skip index next available value can ba displayed in chart. (10:31:00 or next available value). Can you implement this option to skip ?

1 vote
0 answers
2k views

Hello,
I’m thinking to create a RenderableSeries on the React side for SciChart JS using XyDataSeries generated on my .NET backend. Is it possible to do so?

1 vote
2k views

Dear Andrew,

Thank you for the past answers. I have a new question. I have a heatmap with 2 line charts at its left aand top position. the top line chart plot the horizontal values where the mouse if hovering and left chart displays vertical values from the mouse position.

This is working great, but the issue is the heatmap is not always square and I am trying the aligh the line charts with the heatmap dimensions

two issues,

  1. the heatmap X/Y dimension are not always same, in fact I have a function which listens to the changing heatmap zoom factor and makes sure the X/Y are always “square” as we want to show the heatmap with square pixels. (see video #2) https://youtu.be/wXStF-7bWsw

  2. As I dynamically chage the size of the plot the… the proportion of actual chart area to axis lable changes thus varying the overlap. (see video #1) https://youtu.be/loAVpYSRJ38

Let me know if you need more information,

Best,

Pramod

1 vote
2k views

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?

  • haba haba asked 7 months ago
  • last active 2 weeks ago
1 vote
0 answers
2k views

We use a SciChartVerticalGroup instance to create multi-pane view and add additional charts for indicators under the main chart. After updating scichart 2.2.2407 -> 3.2.461 we face with the following error
(see the screen shot).

Error from chart in div cid1694501226340: TypeError: Cannot read properties of undefined (reading ‘invalidateElement’)

It occurs when we remove sub-pane and change the main chart line, for example from FastLineRenderableSeries to FastCandlestickRenderableSeries

There was no such error on version 2.2.2407

How we can I fix this?

1 vote
2k views

I have upgraded the SciChart version to v3.2 and tried to use the memory debugging tools. https://www.scichart.com/documentation/js/current/webframe.html#MemoryLeakDebugging.html

Below are few issues I found:

  • The example in the Memory Leak Debugging page got typo. It should
    import the MemoryUsageHelper instead of MemoryUsageTracker.

import { MemoryUsageTracker } from “scichart”;
MemoryUsageHelper.isMemoryUsageDebugEnabled = true;

  • When I turn on the memory debugger, I always got this warning when I
    move the crosshair in my chart. Is this expected?

DeletableEntity.js:70 Failed to remove
CursorTooltipSvgAnnotation_42d65afd-b859-4e14-b82d-7cda881cf1eb from
the Object Registry Probably it has been already deleted!

  • I also got the warning in point 2 when I try to delete annotation
    from the chart. I think it’s because I am trying to do something
    like this:

sciChartSurfaceRef.chartModifiers.remove(markerAnnotation);
markerAnnotation.delete();

The warning will be gone if I remove the second line above. Is it true that if I remove an annotation/dataSeries from a chart, I don’t need to remove that annotation/dataSeries manually afterward (i.e. annotation.delete()) ? Also, if I deleted a chart, I don’t need to delete it’s annotation/dataSeries manally, right?

  • Quyen Sy asked 7 months ago
  • last active 5 months ago
1 vote
2k views

Hi,

I’m trying to render a mountain series with different colors in specific ranges.
I understand that this could be done using the palette provider.

I have done that, but the chart is behaving in a very strange way.

When dividing the chart to 2 color parts, when panning and scrolling it to a point that some of the points are out of window, the coloring starts to go crazy.

I have attached a few images that show the problem, and have also attached a file with the source code.
I have tested this on chrome version 116

Here’s the code

import {FastMountainRenderableSeries, XyDataSeries,ZoomPanModifier,EXyDirection,MouseWheelZoomModifier,NumericAxis,SciChartJSLightTheme, SciChartSurface, parseColorToUIntArgb, DefaultPaletteProvider, EStrokePaletteMode} from 'scichart'

SciChartSurface.UseCommunityLicense();
SciChartSurface.useWasmFromCDN();

class PaletteProvider extends DefaultPaletteProvider {
  constructor() {
    super();
    this.strokePaletteMode = EStrokePaletteMode.SOLID;
  }

  overrideStrokeArgb(xvalue) {    
    return xvalue > 200 ? parseColorToUIntArgb('#ff0000') : undefined
  }

  overrideFillArgb(xvalue) { 
    return xvalue > 200 ? parseColorToUIntArgb('#ff0000') : undefined
  }
}

const init = async () => {
  const {wasmContext, sciChartSurface} = await SciChartSurface.create('container', {theme: new SciChartJSLightTheme()})

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

  sciChartSurface.xAxes.add(xAxis)
  sciChartSurface.yAxes.add(yAxis)

  sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier({xyDirection: EXyDirection.XDirection}))
  sciChartSurface.chartModifiers.add(new ZoomPanModifier({xyDirection: EXyDirection.XDirection}))

  const array = new Array(500).fill(0).map(val => Math.max(Math.random(), 0));
  const array2 = new Array(500).fill(0).map((val, index) => index);

  const dataSeries = new XyDataSeries(wasmContext)
  dataSeries.appendRange(array2, array);

  const series = new FastMountainRenderableSeries(wasmContext, {
    stroke: 'blue',
    fill: 'blue',
    strokeThickness: 3,
    zeroLineY: 0,
    dataSeries,
    paletteProvider: new PaletteProvider()
  })

  sciChartSurface.renderableSeries.add(series);
}

init();

Thanks for the help!

  • haba haba asked 7 months ago
  • last active 7 months ago
1 vote
2k views

Good afternoon. Please tell me how can I change the Z index of the annotations so that the box annotation can overlap the text. Now no matter how I try to do it, the text is always above the rectangles. Does the JS version have some layers with annotations that can be changed by they Z like in this question – https://www.scichart.com/questions/wpf/changing-an-annotations-z-index

Unfortunately, I did not find this functionality in the JS version.

0 votes
2k views

I have a bubble chart with EllipsePointMarker as pointMarker and a custom palette provider to set the colors of the markers. I need to set a stroke in one of the markers but doesn’t matter what value I return as a stroke value from the overridePointMarkerArgb function, the stroke isn’t applied. Am I missing something?

1 vote
5k views

In our app we have a feature by which user can add indicators. These indicators can consist of 2 or a maximum of 4 lines.

We don’t want to render svg tooltips(which setted up by the default) with data for each line, instead of that we get point data and pass it to our app inner service that can render indicator legend.

To prevent default tooltips from being displayed we set for each renderable series of an indicator the following values.

rolloverModifierProps.width = 0; rolloverModifierProps.height = 0;

But of course tooltips are still rendered in the DOM and this leads to performance issues when we have 3 or more indicators of this type.

My question is the following

How we can render only circles svg for rollover modifier and completely dont render svg for tooltips in the DOM?

This is what the indicators look like

0 votes
5k views

I updated schichart to the very last version and turn on the memory usage debug mode to see if there are any memory leaks in our application and ran into the following problem.

When MemoryUsageHelper.isMemoryUsageDebugEnabled = true; and sciChartSurface has the following modifiers(RolloverModifier, CursorModifier) when moving the mouse over the chart I have the following console warnings.

From RolloverModifier instance
From RolloverModifier instance

From CursorModifier instance
enter image description here
The message below is written on your docs about debugging, so I gues this is the case with the chart modifiers console warnings.

Usually this boils down to failing to call SciChartSurface.delete() (or series.delete()annotation.delete() when adding/removing objects) or plain JavaScript memory leaks where references to SciChart are held in the customer application & not garbage collected by the browser.

Steps To Reproduce

  1. Follow the codesandbox example by the link https://codesandbox.io/s/ts-band-chart-xwlxcm?file=/src/App.tsx;
  2. Once the chart is loaded and rendered, try moving the mouse cursor over the chart;
  3. Open the browser console ⇒ You will see the warnings I wrote about above.

The current behavior

Moving the mouse over the chart causes warning logs to appear in the browser console and possibly memory leaks.

The expected behavior

No warning logs while moving the mouse over the chart.

1 vote
3k views

Hi,

I am facing a issue with latest version of SciChart. Because of this type error not able to build the project. Can you check this error.

1 vote
2k views

I’m trying to add an AxisMarkerAnnotations for some line series on my chart.

I was following these questions answered here:
https://www.scichart.com/questions/js/adding-axis-markers-to-fastlinerenderableseries
https://www.scichart.com/questions/js/price-indicators-on-yaxis

I managed to render the axis marker for my series. Now I’m trying to the set the Y value of the marker annotation as the value where the line intersects the Y Axis.
I want the marker value to be the last value of the series, only if the xAxis.visibleRange.max > series.XdataRange.max.

The two attached images show the desired feature.
One shows the marker annotation with the Y1 being the one where the line intersects the YAxis.
The other shows the marker annotation with the Y1 being the last value of the line, because it is visible.

I read some answers here on the forum about using the HitTest API to do this, but I couldn’t make it work on my JS app

1 vote
2k views

Hi, I want to create info boxes between xAxis and chart, info box will contain text, but the width/position of the box will be base on the xAxis and should sync with the chart (zoom etc). For example, if xAxis is from 1-100, and the first info box start from 1 to 10, then the width/position of the box should cover from 1-10, and if I zoom between 1-10, then info box should also sync and expand.

So far, I have created it using horizontal stacked xAxes and custom axis layout strategy provided by you. But the issue is that the stacked xAxes are not sync with the chart, for now, to make it seem sync, I am recalculating stacked axis length when zoom. But the issue comes when there should be gap between the info boxes, for example, if xAxis is 1-100 and the first box is 1-10 and the second box is 20-40, then there is a gap of 10 between the first and second. Right now, those gap are filled using empty xAxes, but they are not correct. When there is gap, the position of the boxes are wrong.

  • First image is my current implementation of it using custom axis layout and stacked xAxes.
  • Second image is how it look when zoomed
  • Third image is the gap issue with the current implementation
  • Fourth image is how the correct implementation should look like.

Codesanbox example:
https://codesandbox.io/s/scichart-stacked-xaxis-stacked-length-issue-3knt23?file=/src/App.tsx

  • Nung Khual asked 8 months ago
  • last active 8 months ago
1 vote
2k views

Hi, I have an issue where I am trying to create multiple xAxes where one is normal and the rest are horizontally stacked. Then I calculate the stacked length of each stacked axes, but the issue comes when I change the width of the chart or inspect element, which would alter the width of the chart somehow, I got error saying the total width of the stacked axes is bigger than available size.

I have a codesanbox example of it:
https://codesandbox.io/s/scichart-stacked-xaxis-stacked-length-issue-3knt23?file=/src/App.tsx

I am using percentage for the stacked xAxes length and then I added them up to be 100% total, but somehow it is saying that it is more than available size.

So, my question is, how can I listen or get the width/size changes event of the chart/xAxis, so that I can calculate accordingly?

  • Nung Khual asked 8 months ago
  • last active 8 months ago
1 vote
2k views

I have a color heatmap legend that need to update the yAxis range on the fly. The colorMap doesn’t update as expected. Here’s my codes to update the y axis and colorMap min/max of the heatmap legend:

const newRange = new NumberRange(newMin, newMax);
const yAxis = heatmapLegendRef.current.sciChartSurface.yAxes.items[0];
yAxis.majorDelta = newScale;
yAxis.minorDelta = newScale / 5;        
yAxis.visibleRange = newRange;
yAxis.visibleRangeLimit = newRange;
yAxis.zoomExtentsRange = newRange;

colorMapRef.current.minimum = newMin;
colorMapRef.current.maximum = newMax;
heatmapLegendRef.current.colorMap = colorMapRef.current;

The y axis range has been updated. But the colorMap didn’t. It seems that the colorMap of the heatmap legend cannot be changed. Is it true that I can only recreate the heatmap legend if I want to change the colorMap?

  • Quyen Sy asked 8 months ago
  • last active 8 months ago
1 vote
3k views

I’m trying to add a axis label/marker to the yAxis of my chart.
This label should follow the intersection between a FastLineRenderableSeries (that i’m using to render a moving average filtered dataSeries) and the yAxis.

I tried to extend the “draw” method of the FastLineRenderableSeries to draw a label ontop of the yAXis, using the “drawModifiersAxisLabel” helper function. Like:

class CustomFastLineRenderableSeries extends FastLineRenderableSeries {
draw(renderContext: WebGlRenderContext2D, renderPassData: RenderPassData) {
    super.draw(renderContext, renderPassData)
    const yAxis = getYAxis(this.parentSurface);
    drawModifiersAxisLabel(
        yAxis,
        renderContext,
        150, // testing values
        "#00ff00", // testing values
        "#00ff00", // testing values
    );
}

but the label don’t get drawn.

The attached image shows the desired feature (image from another charting lib)

How can I implement this?

1 vote
2k views

Hi,

I am creating an application where, we fetch data and display it in multiple heatmaps. The user can manipulate the heatmaps with changing colormap or changing ranges on the colormap.

Data from these multiple heatmaps is composited to another chart for visualization.

I was able to get a reference to the series, but adding the series to another chart errors with a message:

Invalid operation in sciChartSurface.attachSeries, this series has already been attached to a SciChartSurface. Please detach it from a SciChartSurface before attaching to another
at BaseRenderableSeries.onAttach (BaseRenderableSeries.js:634:1)
at __webpack_modules__../node_modules/scichart/Charting/Visuals/SciChartSurface.js.SciChartSurface.attachSeries (SciChartSurface.js:1385:1)

of course this means we cannot attach the same series to two different charts, but is there a way around this such as deepcloning?

renderable series: attached image

sample code: attached image

1 vote
2k views

Hi Scichart Team.

I am working on the MouseWheelZoomModifier (EActionType.Pan).
But my users are using a trackpad (apple magic trackpad).
Currently, they are using 2 fingers and move up or down (vertically) to pan the chart. But they are asked to pan the chart by using 2 fingers and move left or right (horizontally) instead.

Do we have any setting for MouseWheelZoomModifier that help me pan the chart by that way?

  • TRUONG LE asked 8 months ago
  • last active 8 months ago
1 vote
2k views

By following this example to create reusable SciChart component in React:

https://www.scichart.com/documentation/js/current/TutorialReusableReactComponent.html

The chart cannot be created when run in dev mode. But it works well under production mode. I think it’s because React renders components twice in strict mode. It seems that SciChart got problems to create chart with the following logic when running the application in dev mode. Is this true? Or I missed anything?

 useEffect(() => {
    const chartInitializationPromise = props.initChart(rootElementId).then((initResult) => {
        sciChartSurfaceRef.current = initResult.sciChartSurface;
        return initResult.sciChartSurface;
    });
    const performCleanup = () => {
        sciChartSurfaceRef.current.delete();
        sciChartSurfaceRef.current = undefined;
    };

    return () => {
        // check if chart is already initialized or wait init to finish before deleting it
        sciChartSurfaceRef.current ? performCleanup() : chartInitializationPromise.then(performCleanup);
    };
}, []);
  • Quyen Sy asked 8 months ago
  • last active 3 months ago
Showing 51 - 100 of 372 results

Try SciChart Today

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

Start TrialCase Studies