Category: JavaScript

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?

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?

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?

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

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?

Greetings,
i have three Series in a SciChart.js (Community-Version) Surface.
The Legend i added shows me all three of them and their names and checkboxes do hide or show the series.

Here is my problem: Is there a way to hide one Series (a FastCandlestickRenderableSeries) from the Legend? I only want to show the other two Series (FastLinerenderableSeries).

Somethin like a Parameter “showInLegend: false,”? I did not find something like this in the documentation(https://www.scichart.com/documentation/js/current/typedoc/classes/legendmodifier.html).

Thank you

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/support/solutions/articles/101000515345-scichart-js-domain-licensing-faq)

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?

Hello,

I want to render a base64 image in ScichartJS without actually rendering it in DOM. I saw that you have these guides in WPF:
https://support.scichart.com/index.php?/Knowledgebase/Article/View/17213/34/
https://www.scichart.com/documentation/win/current/webframe.html#Screenshots,_Printing_and_Export_to_XPS.html

However it is difficult to achieve it in Typescript. Is there a guide or any ideas on how to do it? I would appreciate any answer.

Hello, I am using SciChartJS and have a new requirement from our users as follows that I need help with the implementation. Any pointers from anyone would be a great help.

**Requirements: **

• Assume that x-axis is Time and y-axis is prices.
• There are multiple series in the chart (e.g., Bid Price, Ask Price)
• Allow user to select a time on xAxis using CTRL + CLICK
• When the user selects the time, show the rollover line and the tooltip for all series at the selected time
• This rollover line and tooltip should remain visible until the user selects a new time on the x-axis at which point the rollover tooltip should display the tooltip for the new point.

I started inheriting the RolloverModifier but couldn’t find an appropriate method to show the tooltip.

So, I started implementing the above feature using CustomModifierBase2d and adding a VerticalLineAnnotation for the rollover line. But again, struggling with the tooltip.

If someone could help me out or give me pointers, that would be highly appreciated.

Best Regards,
Sachin Patel.

I have a use case for a chart, that is a heatmap, which may also contain multiple series drawn on top, with multiple internal axis as well.
I can’t transform the data I receive, because that would be too slow, and it needs to maintain a speedy feeling, even when appending more data.

For this reason, when building the chart, I just flip the axis. The bottom axis is the Y axis, and the left axis it the X axis.

The multiple series that can be added (XyDataSeries), provide one extra axis each, and use one of the main axis.
We can think of them as horizontal or vertical series, depending if they use the main X axis, or the main Y axis.

When hovering over the chart, I want to show a tooltip, that shows for each series, their own axis value.

The issue — The normal CursorModifier, can’t correctly present a tooltip, for this case of mixed horizontal/vertical series. I’m not sure if there are configurations I’m missing, or if it is an actual uncovered edge case, hoping to get an answer on this.

To show what the issue is, and how I’m currently fixing it, please have a look at the codepen I made -> https://codepen.io/jrfv/full/zYMjEzP

Any tips on this, is it something scichart will fix eventually?

Hello,
tell me please, how can I add such indicators on yAxis. Maybe you have some example on sandbox for JS.

Thank you!

Please tell me, is it possible to make sure that there is no empty space between records on those days when there is no trading on the stock exchange? It appears that the X-axis is linear and not transactional. How can I make it transactional?

Hi there,

Wow this library has come along way in ten years. My question is related to interaction between RS and the legend that is rendered by the chartmodifier.

I declare the legend something like this during the initial bootstrapping of the plot view:

        const legend = new LegendModifier({placementDivId: "legend-goes-here", id:"legend"});
        sciChartSurface.chartModifiers.add(legend);

After that, I have a custom interface available for users to change things, which eventually results in visibility or color changes, updating an RS something like this:

        const thisRs = surface.renderableSeries.getById(`${s.fileId}-${s.name}`);
        if (thisRs) {
            thisRs.isVisible = s.isVisible;
            thisRs.stroke = s.visualInfo?.colorCode ?? "#FFFFFF";
        } 

These changes do not appear to be propagated to the legend despite the series on the plot changing. I guess my questions are:

1) What’s the expected behavior/is there something obvious I’m missing about the model?
2) Any suggestions?

It may very well be somewhere lost in my fairly complex React app, but I first wanted to confirm that I’m not missing something in the api.

Thanks!
Dan

Hello,

When annotations and the rollover modifiers are displayed on the very left side of a chart they align with the center of the candlesticks on the chart. However, as they get displayed toward the right side of the chart they get more and more offset to the right side of the candlestick.

Can anyone point me in the right direction to figure out how to fix this issue seemingly with my xAxis?

See attached screenshots,

Hello,

We have a heatmap where we can zoom in using the MouseWheelZoomModifier. Essentially we want to stop zooming at a certain visibleRange level and we cannot achieve it. Currently we have a heatmap that’s about 1500 pixels in width (with 1500 datapoints, 1-to-1), but the user can zoom so far you essentially see just 1 data point spread over the 1500 pixels.

We want to be able to zoom, but up to a certain limit, let’s say 100 datapoints visible. When visibleRange.max – visibleRange.min <= 100 we want to stop zooming.

We’ve tried suspendUpdates() and manually setting the visibleRange, but this doesn’t produce the desired results because suspendUpdates stops everything (including zooming out again) and resetting visibleRange solves it for a second, but the user is able to zoom in again. We also tried a custom mouseWheelModifier class and just removing the zoom in functionality at the treshold but that does not seem to work because scichart gives an error of having different mouseWheelModifiers.

I hope that this problem was expressed sufficiently. Please let us know if you have any questions.

Hello All,

Is there a way to have a cursor modifier display on a mouse left/center/right click instead of automatically showing when the mouse is over the chart? I tried setting the ExecuteOn property but had no effect.

Thanks in advance,
Sergio.

Currently, I am creating a line chart and appending a lot of fetched data to the data series. The problem is that I have to recreate the chart when I move to another page that is using the same chart from the previous page. Therefore, I have to fetch the data and append it to the chart data series again.

Is there any way to reuse the chart itself without recreating the whole chart on another page?

I am using a axis line chart from the js scichart. I want to change the font size of a legend. How do I change the font size of a legend?

I used NPM to complete the deployment and development validation of SCICHART JS, and I completed the demo as follows:

At present, I have two unresolved issues that we will make a purchase decision after they are resolved:
1、How to set the sampling rate for chart?
Using the wpf control, the sampling rate can be set through the “FifoCapacity” property of XyDataSeries, but I did not find this property in the JS control.

2、How to hide the preview of the SciChartOverview control?

       I don't want to display the data of the bound chart

Hi Andrew,

I have 2 independent questions,

Q1.
I have been working with uniform heatmap and I need a way to fix the aspect ratio to 1, for all resize, zoom events, is there an option in heatmap to fix an aspect ration? Please see the attached video
https://youtu.be/obhH6KLExYw

Q2.
I am trying to implement a lasso select method to select and highlight the heatmap data. I did not find lasso select in the documentation hence I went ahead and implemented my own method.

I am drawing an svg using D3 (offsetX and offsetY variables) and then adding it to the annotation as you will see in the video and trying to get all the hitTest data inside the lasso.

If I use the customAnnotation then heatmap is able to draw correct size and location of the SVG
customAnnotation:
https://youtu.be/gL34sAbxYSE

But it does not pan and zoom with the plot data. after looking through documentation I came across OverviewCustomResizableAnnotation which seems designed for zooming and panning with the data.

But while using the OverviewCustomResizableAnnotation the SVG size keeps changing during the update and is not located at the correct location relative to the data.

sciChartSurfaceRef.current.annotations.add(
new OverviewCustomResizableAnnotation({
id: "lassoSVG",
x1: shortestXinData,
y1: shortestYinData,
isEditable: false,
isSelected: false,
yCoordinateMode: ECoordinateMode.DataValue,
xCoordinateMode: ECoordinateMode.DataValue,
verticalAnchorPoint: EVerticalAnchorPoint.Top,
horizontalAnchorPoint: EHorizontalAnchorPoint.Left,
svgString: new XMLSerializer().serializeToString(svg.node())
})
)
OverviewCustomResizableAnnotation:
https://youtu.be/-AOJ9V3l-xI

Thanks,

Pramod

Hello All,

I was trying to set the visual range property on a numeric axis but i get the error that the “equals” is not a function of NumerixAxis. This happens when i try the following.

export function setXAxisVisibleRange(element, visibleRange) {
     const { sciChartSurface } = resolveContext(element);
     var axis = sciChartSurface.xAxes.get(0);
     axis.visibleRange = visibleRange; **//error here**
}

attached is a picture of a more detailed error. Ultimately what I am trying to do is to sync up the visual range of two charts x axis like in the following tutorial

https://www.scichart.com/documentation/js/current/webframe.html#Tutorial%2009%20-%20Linking%20Multiple%20Charts.html

Thanks for your help in advance.

UPDATE

So my issue was that I had a serialization issue with the NumberRange class. I can now sync up the charts just like in the tutorial. The problem now is that if I scroll or zoom very fast eventually the charts start to flicker in an endless loop. Has anyone ever seen this behavior? One thing I notice is that the min and max value have over 10 decimal points.

Here is a quick printout of the value change events between the two charts when the flickering starts.

Any ideas?

–> CH.1 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.2 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.2 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.2 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.1 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.2 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.1 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.1 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.1 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.2 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.1 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.2 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.2 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.2 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.1 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.2 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.1 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.1 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.1 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.2 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.1 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.2 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.2 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.2 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.1 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.2 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.1 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.1 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.1 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.2 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.1 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.2 Min: -0.17488026755852848 Max: 4.339519732441472

Hello. I noticed that a canvas appears in the DOM tree, which completely duplicates the main chart, but it is set to display: none.

can i ask what it is used for? does it affect performance? and can i remove it?

Can SciChart be used in Qt? If so, is there a demo available for reference, or can you provide guidance on how to use it?

Hi,

We use SciChart extensively in our WPF applications and make use of CustomRenderableSeries, writing all kinds of different lines and bitmaps directly to the IRenderContext2D depending on the point metadata.

We’re now looking at doing something similar in JavaScript, but can’t find any examples of this kind of customisation in the documentation. In the JavaScript library, is it possible to draw directly to a ‘canvas’ in the same way as in the WPF version? If so, could you please point to an example?

Many thanks,

Graham.

I have a real time updated chart with very large data size and I am facing the slow client problem. i.e. The data sending speed is faster than the data receiving and handling speed which causes memory growing up issue. I am trying to use Web Workers to increase the data handling speed in frontend. I have found a related post:

https://www.scichart.com/questions/wpf/is-xydataseries-safe-to-being-changed-in-a-separate-thread

It seems possible to update XyDataSeries in the background thread with WPF. My UI is built with NextJS. I tried to use Web Workers to implement multiple threads. But I found that it can’t pass the SciChartSurface or XyDataSeries to the worker thread. Could you show me an example on how to update XyDataSeries in the worker thread with Web Workers?

The scichart y axis is displayed as undefined after updating the data in timed interval. The y axis initially shows the value,but after the data is appended to the source, the y axis is shown as undefined in the chart.

I have attached the final scichart image with yaxis as undefined.

In a DateTimeNumericAxis, can I convert the number from VisibleRange to a formatted string HH:MM:SS?
For example, I’d like to convert this x1 to 12/1/1984, 3:00:00 PM, or 15:00:00.

let x1 = this.parentSurface.annotations.getById("hrv").x1;
// x1 =470761200, seconds since 1970.01.01 00:00:00

Thanks.